重置元素的 .style / 在不覆盖 .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 在屏幕宽度超过 1000 像素时悬停在上面，.projectTitle 的不透明度应该设置为 1，并在未悬停时返回 0。但是，如果在屏幕小于 1000 像素时将其悬停，则不会发生任何事情；在这种情况下，它应该始终保持为 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”值被放入元素的样式中，覆盖从“initial”返回的css继承的值。

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

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