CODEWITHSUNDEEP
javascriptcss
MShack
MShack

Reputation: 652

Hide image when hovering another image

I can't seem to get this working , so don't know if its possible

When i hover over the img.helmet , i want the img.icon to be hidden

  <img class="helmet" src="">
  <img class="mini" src="">        
  <img class="helmet" src="">
  <img class="mini" src="">
  <img class="icon" src="">

Here is my jsfiddle attempt - http://jsfiddle.net/8wrbL/28/

.helmet:hover > .icon,.helmet:hover + .icon {
  display:none;z-index:-999999;left:-999999;
}

Updated: appears this works , but seems like a lot a css for a simple task , i'll have a lot of images and this way might take some time

.helmet:hover+.mini+.icon,.helmet:hover+.mini+.helmet+.mini+.icon,.helmet:hover+.mini+.helmet+.mini+.helmet+.mini+.icon{
display:none;
}

Upvotes: 1

Views: 104

Answers (2)

Mouhamed Halloul
Mouhamed Halloul

Reputation: 209

Or you simply use the hide and show of Jquery :: http://www.w3schools.com/jquery/jquery_hide_show.asp

Upvotes: 0

jhawes
jhawes

Reputation: 2364

Try targeting it with jQuery and using the class as a way to hide it.

jQuery

$('.helmet').hover(function () {
   $('.icon').toggleClass('hidden'); 
});

CSS

.icon.hidden {
    display: none;
}

Here's a jsFiddle

Upvotes: 2

Related Questions