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的问题在于，当您将鼠标悬停在放大镜图标上时，您不再悬停图像，以便恢复到初始状态。

悬停状态 - 不能应用伪类

1 个答案: