悬停状态 - 不能应用伪类

Question

我有一个图像,其上方有一个播放图标.当用户将鼠标悬停在图像上时,图像的亮度会变暗,并且"播放"图标将替换为"放大玻璃"图标.

我遇到的问题是,当用户将鼠标悬停在Magnify Glass图标上时,此图标会切换到"播放"图标.这不应该发生,因为仅当用户没有悬停在图像上时,"播放"图标才可见..search:hover ~ .play { display:none; }如果Magnify Glass图标悬停在上面,我已经应用了哪些不会使Play图标可见,但这不起作用.

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

你想要的:hover是a,而不是图像

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

DEMO

当前CSS的问题在于,当您将鼠标悬停在放大镜图标上时,您不再悬停图像以使其恢复为初始状态.