Question

我得到的是div中的图像，当您将鼠标悬停在图像上时，另一个div从底部弹出，同时图像不透明度下降到0.35。但是当你将鼠标悬停在弹出的div上时，图像的不透明度再次变为1，并且只要另一个div上升，我希望它保持在0.35。我希望我的问题很清楚。

这是html代码

<div class="f1">
    <div class="f2">TEXT</div>
    <div class="image">
    <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200" />
    </div>
    </div>

这是fiddle

Answer 1

查看更新的小提琴：

http://jsfiddle.net/4LkD7/5/

我刚刚改变了悬停CSS，所以：hover应用于它自己的.f1元素，并将不透明度应用于img子元素。

 .f1:hover img {
     opacity: 0.35;
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
 }

Answer 2

你最好使用

.f1:hover > #imagename{
opacity: 0.35;
     -moz-transition-duration: 0.6s;
     -webkit-transition-duration: 0.6s;
     -o-transition-duration: 0.6s;
}

因此它只会影响特定的图像。

当你将鼠标悬停在另一个div上时，如何使图像的不透明度保持0.35？

2 个答案: