Присвойте два разных класса/идентификатора атрибута: hover

Question

Я работаю над темой tumblr, где отдельные сообщения отображают ссылку на постоянную ссылку на hover, а почта под ней размывается. .entry:hover #permalink и .entry:hover img {-webkitfilter:blur} работа как индивидуально, но нет вместе. Возможно, я неправильно делаю CSS, когда пытаюсь назначить .entry:hover двум различным атрибутам. Или это проблема z-index и position?

Могу ли я использовать jQuery, чтобы сделать что-то вроде «если указатель поворота показывает постоянную ссылку -> размытие записи img»?

JSFiddle demo

CSS:

body{ 
position:absolute; 
} 
.entry { 
float:left; 
width:100%; 
} 
.entry #permalink { 
position:absolute; 
width:100%; 
opacity:0.0; 

} 
.entry:hover #permalink { 
    opacity: 1; 
    text-align:center; 
    } 
.entry img { 
    -webkit-filter: blur(0px); 
} 
.entry:hover img { 
    -webkit-filter: blur(5px); 
} 

HTML:

<div class="entry"> 
<div id="permalink"><a href="#">post number x</a></div> 
<img src="#" alt="#" width="500px"/> 
</div> 

Answer 1

просто добавить z-index:100; или что-то еще больше, чтобы ваши .entry:hover #permalink, вот working demo