JQuery treats hover on two elements as one element

Question

I have an image map that I overlaid on some markers in the form of anchors. I currently have a hover trigger on each area of ​​the image map and an anchor associated with it - as shown in the screenshot

I need to consider these two elements as one, since at the present time, when the mouse moves from one to the other, it calls .hover()and the callback again. I want to call the hover callback only when the mouse is out of any element.

Answer 1

$('#areaID1, #areaID2').hover(function(){
    //same mouseover event
}, function(){
    //same mouseout event
});

Answer 2

Here is the code I'm using:

MAP.area = $('#centre_map area, #map ol li');
MAP.area.hover(function() {
    // Add active classes
    // Load content
    load_map_activity($('body').attr('id'), $(this).attr('class'));
}, function() {
    // Remove active classes
})


<div id="map">
<img src="<?php echo base_url(); ?>images/bristol_map.png" alt="bristol map" usemap="#centre_map" />
<map name="centre_map" id="centre_map">
    <area shape="poly" coords="179,95,188,87,187,53,181,48,54,29,41,38,37,53,39,77,44,87" href="#" class="paintball" alt="Paintballing" />
</map>
<ol>
    <li class="paintball"><a class="marker paintball" href="#" title="Paintballing">1</a></li>
</ol>

. , , , , ( ).

Answer 3

I managed to achieve the desired result - I was looking for a problem due to the wrong angle, this is not a hover problem, but the ajax call did more.

    MAP.area = $('#centre_map area, #map ol li');
MAP.area.hover(function() {
    // Add active classes
    $('#map_key ol li a.'+$(this).attr('class')).addClass('active');
    $('#map ol li a.'+$(this).attr('class')).addClass('active');

    if(typeof MAP.current_content == 'undefined')
    {
        // Load content
        load_map_activity($('body').attr('id'), $(this).attr('class'));
    }

    if(MAP.current_content != $(this).attr('class'))
    {
        $('#map_info > *').remove();
        // Load content
        load_map_activity($('body').attr('id'), $(this).attr('class'));
    }
}, function() {
    // Remove active classes
    $('#map_key ol li a.'+$(this).attr('class')).removeClass('active');
    $('#map ol li a.'+$(this).attr('class')).removeClass('active');
})


function load_map_activity(centre, activity) {
    MAP.current_content = activity;
    $('#map_info').hide().load('/ajax/'+centre+'_'+activity, {}, function() { $(this).fadeIn('fast'); });
}

Thanks to everyone who helped.

Answer 4

As you said, you need to consider these two elements as one so that you can create a parent container, and on this container you can easily bind an event

<div id="mapContainer">
   <div id="areaID1"> xyz </div>
   <div id="areaID2"> xyz </div>
</div>

$('#mapContainer').hover(function(){
    //do anything
    }, function(){
    //do anything
});