CODEWITHSUNDEEP
jquerycsshovertogglemouseover
Sideshow
Sideshow

Reputation: 1351

JQuery toggle visibility on mouseover of multiple images

Having problems with a simple jquery mouseover function.

I have a number of dynamically generated icons which when I hover will show a hidden div, and when I mouesout will hide the div.

 <div class='lister1'>
   <img src='"+path+stat1+"' />
   <img src='"+path+stat2+"' />
   <img src='"+path+stat3+"' />
   <img src='"+path+stat4+"' />
   <img src='"+path+stat5+"' />
   <img src='"+path+stat6+"' />
 </div>

JQuery:

$('.hover_pop').hide();

$(document).on('hover','.lister1 img', function(){
$('.hover_pop').show(), function(){
    $('.hover_pop').hide();
}
});

This will show the div but unfortunately will not hide it.

Upvotes: 3

Views: 2691

Answers (2)

kushalbhaktajoshi
kushalbhaktajoshi

Reputation: 4688

Try this

$(document).on('hover','.lister1 img', function(){
$('.hover_pop').show()}, function(){
    $('.hover_pop').hide();
});

You have closed the curly brace of first function at the end previously

EDITED

$(document).on({
   mouseover: function() {
       $('.hover_pop').show()
   },
   mouseout: function() {
       $('.hover_pop').hide()
   } 
}, '.lister1 img');​

DEMO HERE

Upvotes: 1

Ram
Ram

Reputation: 144709

As of jQuery 1.8 using hover event with on method is deprecated, you can code:

$(document).on({
   mouseenter: function() {
       $('.hover_pop').show()
   },
   mouseleave: function() {
       $('.hover_pop').hide()
   } 
}, '.lister1 img');

Upvotes: 4

Related Questions