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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以通过将鼠标悬停在div而不是img来实现这一点：https://jsfiddle.net/om83Ljtm/2/

.event:hover img {
   opacity: 1;
}

Answer 3

就像这样;）

$("#images-content").on('load', function(){
    var width = this.naturalWidth;
    var height = this.naturalHeight;
});

.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 { /* Just change this */
    opacity: 1;
}

使用图片和文字悬停在div上的效果

3 个答案: