悬停状态 - 不能应用伪类

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的问题是，当你将鼠标悬停在放大镜图标，你不再徘徊图像，因此它恢复到它的初始状态。