Question

当我悬停在第一张图片上时，我有2张图片正在改变。在第二个我有一些文本，因为我想要一个链接。我现在的问题是，当我将鼠标悬停在链接上时，我希望悬停图像保留。

这是我的代码：

    #blur {
border: 1px solid #bebfc1;
  position:relative;
  height:450px;
  width:300px;
  margin:0 auto;
    -webkit-transition: border 1s ease-in-out;
  -moz-transition: border 1s ease-in-out;
  -o-transition: border 1s ease-in-out;
  transition: border 1s ease-in-out;
}

#blur img {
  position:absolute;
  left:0;
  -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;
}

#blur:hover {
z-index:2;
border: 1px solid #000000;
}

#blur img.top:hover {
opacity:0;

}

#blur .text {
position:absolute;
color:#bebfc1;
opacity:0;
  -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;
  font-family:"Segoe UI Light";
  font-size:13px;
}

#blur:hover .text {
opacity:1;
}


    <div id="blur">
  <img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
  <img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
   <p class="text" style="bottom:6px; left:180px;"><a href="#">link</a></p>
</div>

当我将鼠标悬停在链接上时，我希望红色图像保持不变。如何才能做到这一点？谢谢!!!

DEMO http://jsfiddle.net/VYR9q/

Answer 1

我认为您应该将:hover从img移至公共父#blur

#blur img.top:hover {

到

#blur:hover img.top {

实例：http://jsfiddle.net/VYR9q/2/

Answer 2

好的，我把它修好了你提供的小提琴：）

这就是我修复的内容：

 #blur:hover .top {
     opacity:0;
 }

而不是：

#blur img.top:hover {
    opacity:0;

}

编辑自：@biziclop：你可以做到：

#blur:hover img.top

Answer 3

将您的CSS更改为：

#blur:hover img.top {
   //your css
}

链接图像悬停

3 个答案: