链接图片悬停

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

好吧，我固定它在您提供的:)

这里小提琴行，你是我的固定：

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

相反的：

您可以：

#blur:hover img.top 

Answer 2

我想你应该简单地从img移动:hover到共同的父#blur

#blur img.top:hover { 

到

#blur:hover img.top { 

活生生的例子：http://jsfiddle.net/VYR9q/2/

Answer 3

更改CSS来：

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