jquery show/hide

The second parameter of the $ function is often times used to define the context. Meaning, your selector will be used relative to a particular element, or selector.

$(".event") // finds all .event elements $(".event", this) // finds all .event elements within 'this' 

With this in mind, we can modify your code to look within the .event element currently being entered or existed to find the appropriate image:

​$("#event .event").on({ mouseenter: function(){ $("img", this).show(); }, mouseleave: function(){ $("img", this).hide(); } });​​​ 

This binds some logic to every element that matches the #event .event selector. Each one of these will have a handler bound to their mouseenter and mouseleave events. Anytime you hover one of those elements matched by the selector, we reference that particular element using the this keyword.

If you enter the first #event .event element on the page, this refers to that element. Likewise, if you exit that element, this refers to that element being exited. Recalling the first point of this response, that means $("img", this) will target every image within the element raising the mouseenter or mouseleave events to begin with.

Also, double-check your use of .hover(); this method takes two parameters, functions, that will be called when you mouseenter and when you mouseleave, respectively:

$("#event .event").hover( showImages, hideImages ); function showImages () { $("img", this).show(); } function hideImages () { $("img", this).hide(); } 

Or you could place those directly inside the .hover method as anonymous functions:

$("#event .event").hover( function(){ $("img", this).show(); }, function(){ $("img", this).hide(); } ); 

You're hiding and showing all the images, you need to use the this keyword to target only the current element, not all of them, here is another simpler solution using toggle:

$(document).ready(function(){ $("#event .event").on('mouseenter mouseleave', function() { $('img', this).toggle(e.type=='mouseenter'); }); });