html - 将鼠标悬停在带有图像和文本的 div 上

Question

我提供了一个 JSFiddle:https://jsfiddle.net/om83Ljtm/

它包含一个 div , img , 和 span元素。 img作为 div 的背景图像.我不使用 CSS background - 背景图像的属性，因为我想在悬停 div 时更改不透明度. span包含与背景图像重叠的文本。将鼠标悬停在 div 时, 我想改变图像的不透明度。但是，当鼠标悬停在文本 ( span ) 上时，这会起作用， img 的不透明度会降低。变回初始值 0.6。但是当我将鼠标悬停在文本上时，我希望图像不(!)改回其不透明度。如何实现？

总结一下:在 JSFiddle 中，如果我将鼠标悬停在 div 上，不透明度变为 1。这应该保持不变，即使我将鼠标悬停在 span 中的文本上.这还行不通。

Answer 1

使用 .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>