懸停狀態 - 不能應用僞類

Question

我有一個圖像，並在上面放置了一個Play圖標。當用戶將鼠標懸停在圖像上時，圖像的亮度變暗，Play圖標被放大鏡圖標替代。

我遇到的問題是當用戶將鼠標懸停在放大鏡圖標上時，此圖標切換到播放圖標。這不應該發生，因爲只有當用戶沒有懸停在圖像上時，「播放」圖標纔可見。我已經應用了.search:hover ~ .play { display:none; }，如果放大玻璃圖標懸停在上方，則不會使「播放」圖標可見，但這不起作用。

http://jsfiddle.net/gDwba/

<a href="#"> 
    <img class="art" src="http://farm4.staticflickr.com/3133/3255025717_49268c7c85_z.jpg?zz=1"> 
    <img class="search" src="http://icons.iconarchive.com/icons/deleket/scrap/256/Magnifying-Glass-icon.png"> 
    <img class="play" src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/256/Play-Normal-icon.png"> 
    <div class="cover"></div> 
</a> 

.art { width:320px; height:240px; } 
.search { z-index:3; position:absolute; top:90px; left:130px; width:75px; height:75px; display:none; } 
.play { z-index:2; position:absolute; top:90px; left:130px; width:75px; height:75px; } 
.cover { z-index:1; position:absolute; top:8px; left:8px; width:320px; height:240px; background:#000; opacity:0.5; display:none; } 

.art:hover ~ .search { display:block; } 
.art:hover ~ .play { visibility:hidden; } 
.art:hover ~ .cover { display:block; } 

.search:hover ~ .play { display:none; } 
.search:hover ~ .cover { display:block; } 

Answer 1

你想在a的:hover，而不是圖像

a:hover .search { display:block; } 
a:hover .play { visibility:hidden; } 
a:hover .cover { display:block; } 

DEMO

與您當前的CSS的問題是，當你將鼠標懸停在放大鏡圖標，你不再徘徊圖像，因此它恢復到它的初始狀態。