html - 链接图像悬停

Question

当我将鼠标悬停在第一张图片上时，我有两张图片正在发生变化。

在第二个上，我有一些文字，因为我想要那里的链接。我现在的问题是，当我将鼠标悬停在链接上时，我希望悬停图像保持不变。

这是我的代码:

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

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

此处演示 http://jsfiddle.net/VYR9q/

Answer 1

好的，我在你提供的 fiddle 行中修复了它:)

这是我修复的:

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

代替:

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

}

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

#blur:hover img.top