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

Question

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

这是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>

这是小提琴

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;
}

这样它只会影响特定的图像。