Question

i have a code that displays event information from the database. the parent container’s id is show_id. Inside show_id there is some hiden div event_more_details with contents thats only supposed to show when i hover on the parent div which is show_id (in my case am using mouseenter function). Here is the code:

$('.show_event').mouseenter(function(){
    $('.event_more_details').fadeIn(500);
});

Problem is, if the php generates five events, when i hover on one event, the hidden div fades in all the other parent divs, too.

Answer 1

After going through the jquery functions library i think i found an answer:

$('.show_event').hover(function () {$(this).find('.event_more_details').fadeIn(500);}, function () {$(this).find('.event_more_details').fadeOut(500);});

This works fine for me,by the way, @Ohad thanks alot 444 your help.