Question

我有这个代码

当用户在1秒后悬停在图像上时，其他人会更改opacity:0.4。但是，当用户转到另一个图像时，我希望所有图像都返回到opacity:1，如果他再次悬停一秒，则其他图像将更改为opacity:0.4。

我理解规则

#tiles li {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

解决了这个问题，但是我希望将此规则保留为我在某些<li>项目移动时进行的其他转换。

我想要视觉效果，就像我没有上面的CSS规则但没有删除它。

我不介意使用javascipt，jquery。

编辑：我想要这个结果： http://jsfiddle.net/KJ8T4/ 但我也希望有这个CSS规则

#tiles li {
      -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
    }

Answer 1

您可以使用JavaScript或jQuery。

这是 Fiddle 。

$('li').on("mouseout", function() {
   $('img').css('opacity', '1');
});

Answer 2

纯CSS解决方案：

LIVE DEMO

#tiles{
  margin:0;
  list-style:none;
  display:table;
  border-collapse:collapse;
}    
#tiles li {
  vertical-align:middle;
  display:table-cell;
  padding:5px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#tiles li img{
  vertical-align:middle;
}    
#tiles:hover li{
  opacity: 0.4;
}
#tiles li:hover{
  opacity: 1;
}

如何更改不同操作的css转换？

2 个答案: