Multiple DIV hover over with click through issue

Question

I have multiple DIVs each containing an event flyer. After hovering over, I want to display the event name and details with the ability to click to the event listing. This works with the first listed event but none of the following. I have the following Javascript code and DIV structure as outlined below. The page is located at http://midnightguru.com/events_concept.php for reference.

<script type="text/javascript">
   $(document).ready(function() {
    $("#event_main").mouseenter(function() {
         $("#event_hover").show();
        }).mouseleave(function() {
         $("#event_hover").hide();
        });
   });
</script>
<div id="event_main"></div><div id="event_hover"></div>

Any help is appreciated! I have searched hard and cannot figure this out!

Answer 1

Well,

First of all, the ID prop must be used to identify a single instance of an object.

So, instead, use a class for the div elements and do something like:

$('.event_main').mouseenter(function(){
        $(this).find('.event_hover').show();
    }).mouseleave(function(){
        $(this).find('.event_hover').hide();
    });
});

<div class='event_main'>
    ... 
    <div class="event_hover" style="display: none;">
        ...
    </div>
</div>

EDIT: Also, put that script on $(document).ready only once for all the page, ok?

gl

Answer 2

It is working on the first item matched, because the jQuery selector

$('#event_main')

is actually only matching the first of your event divs, even though they all have an id of event_main .

The # selector will match a single element only: http://api.jquery.com/id-selector/

You will want to use some other jQuery selector to match elements, because all of those divs have an id of event_main. (Maybe your intent was to use event_main as the divs' class and then use .event_main as the selector?)