Reputation: 8541
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.
<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; }
Upvotes: 1
Views: 152
Reputation: 36742
You want the :hover
on the a
, not the image
a:hover .search { display:block; }
a:hover .play { visibility:hidden; }
a:hover .cover { display:block; }
The problem with your current CSS is that when you hover over the magnifying glass icon, you are no longer hovering the image so it reverts to it's initial state.
Upvotes: 5