CODEWITHSUNDEEP
htmlcsscss-selectors
Jon
Jon

Reputation: 8541

Hover States - Can't Apply Pseudo-class

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

Upvotes: 1

Views: 152

Answers (1)

Turnip
Turnip

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

DEMO

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

Related Questions