Ссылка на изображение hover

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 img.top:hover { 
    opacity:0; 

} 

Редактировать с: @biziclop: Вы можете сделать это:

#blur:hover img.top 

Answer 2

Я думаю, вы должны просто двигаться :hover от img к общему родителю #blur

#blur img.top:hover { 

в

#blur:hover img.top { 

Живой пример: http://jsfiddle.net/VYR9q/2/

Answer 3

Изменение CSS для:

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