问题

Question

我在另一个div（.projectTitle）中有一个div（.projectContainer）。当屏幕宽度超过1000像素时，.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);
        }
    }
);

问题

当unhovering将不透明度重置为它的值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

重置元素的.style /恢复为＆＃39; initial＆＃39;没有.style覆盖

问题

1 个答案: