1

I have an image with a Play icon positioned on top of it. When the user hovers over the image, the image's brightness darkens and the Play icon is replaced with a Magnify Glass icon.

The issue I am having is that when the user hovers over the Magnify Glass icon, this icon switches to the Play icon. This should not happen as the Play icon is visible only when the user is not hovering over the image. I have already applied .search:hover ~ .play { display:none; } which will not make the Play icon visible if the Magnify Glass icon is hovered over, but that is not working.

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; }
4

1 回答 1

5

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

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

演示

当前 CSS 的问题在于，当您将鼠标悬停在放大镜图标上时，您不再悬停图像，因此它会恢复到初始状态。

于 2013-06-24T19:03:10.840 回答