我提供了一个 JSFiddle:https://jsfiddle.net/om83Ljtm/
它包含一个 div
, img
, 和 span
元素。 img
作为 div
的背景图像.我不使用 CSS background
- 背景图像的属性,因为我想在悬停 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>
关于html - 将鼠标悬停在带有图像和文本的 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38436359/