重置元素的 .style / 恢复为 'initial' 而不覆盖 .style

Question

我在另一个 div (.projectContainer) 中有一个 div (.projectTitle)。当屏幕大于 1000px 宽时，.projectTitle 被初始化为 opacity:0;。当屏幕宽度小于1000px时，初始化为opacity:1;。参见：

@media (min-width: 1000px) {
    .projectTitle {
        opacity:0;
    }
}
@media (max-width: 1000px) {
    .projectTitle {
        opacity:1;
    }
}

现在，如果 .projectContainer 在屏幕宽度超过 1000px 时悬停，.projectTitle 的不透明度应动画为 1，并在未悬停时返回 0。但是，如果在屏幕小于 1000px 时悬停它，则不会发生任何事情；在这种情况下，它应该始终保持在 1。

我有一个变量 (windowState)，它会根据屏幕的宽度而变化：

小于 1000px，windowState = 3

大于 1000px，windowState = 2

我有一个看起来像这样的 jQuery 事件来处理悬停，它可以正常工作：

$(".projectContainerr").hover(
    function(){
        if (windowState != 3){
            $('.projectTitle', this).animate({
                opacity:1},100);
        }
    },
    function(){
        if(windowState != 3){
            $('.projectTitle', this).animate({
                opacity:"initial"},100);
        }
    }
);

问题

当不透明度在取消悬停后重置为 initial 的值（也就是媒体查询中定义的值）时，该值将被悬停时已设置为 1 的事实覆盖上。悬停的“1”值被放置到元素的样式中，覆盖 css 的继承值，'initial' 已将它返回到该元素。

如何在不使用元素样式的情况下防止此值被覆盖/重置/设置动画？

Answer 1

你为什么不使用 css3 转换而不是 jQuery

@media (min-width: 1000px) {
  .projectContainer:hover .projectTitle{
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
  }
  .projectTitle {
    opacity:0;
  }
}
@media (max-width: 1000px) {
  .projectTitle {
    opacity:1;

  }
}

这是一个demo

重置元素的 .style / 恢复为 'initial' 而不覆盖 .style

Resetting the .style of an element / reverting to 'initial' without .style overriding

css

jquery

media-queries

问题