我提供了一个JSFiddle：https ://jsfiddle.net/om83Ljtm/
它包含的div，img和span元素。这些img行为是的背景图像div。我不使用CSSbackground属性作为背景图像，因为我想在将悬停在时更改不透明度div。该span包含重叠在背景图像文本。悬停时div，我想更改图像的不透明度。但是，这在鼠标悬停文本（span）时起作用，img更改的不透明度恢复为初始值0.6。但是，当我将鼠标悬停在文本上时，我希望图像不（！）变回其不透明度。如何做到这一点？
总结一下：在JSFiddle中，如果将鼠标悬停在上div，则不透明度将更改为1。即使将鼠标悬停在上，也应保持不透明度span。这还行不通。
使用.event:hover img代替.event img:hover
.event {
width: 200px;
position: relative;
border: 1px solid #dddddd;
height: auto;
}
.event .titel {
float:left;
font-size: 20px;
background-color:white;
padding:3px;
position:absolute;
top:50px;
left:5px;
}
.event img {
opacity: 0.6;
width: 100%;
}
.event img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.event:hover img {
opacity: 1;
}<div class="event">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<span class="titel">text text text text text text text text text </span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句