jQuery traiter hover sur deux éléments comme un élément

Question

J'ai une carte d'image que j'ai recouverte de quelques marqueurs sous la forme d'ancres. J'ai actuellement un déclencheur de vol stationnaire sur chaque zone de carte d'image et l'ancre associée - comme le montre l'écran tourné

je dois traiter ces deux éléments comme l'un, comme actuellement lorsque la souris est déplacé hors d'un dans la autre, il appelle .hover() et le rappel à nouveau. Je souhaite appeler le rappel de survol uniquement lorsque la souris est déplacée de l'un ou l'autre élément.

Answer 1

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

Answer 2

Voici le code que je utilise:

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> 

Rory McCrossan Je vais essayer cela, mais je crains depuis l'ancre est posée ontop de la zone de carte d'image l'appel de vol stationnaire sera être fait à nouveau lorsque la souris est déplacée sur l'ancre (même si nous sommes encore au-dessus de la zone de la carte).

Answer 3

J'ai réussi à atteindre le résultat souhaité - je regardais le problème sous un mauvais angle, ce n'est pas un problème de vol stationnaire, mais plus de faire l'appel ajax.

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'); }); 
} 

Merci à tous ceux qui ont aidé.

Answer 4

Comme vous avez dit que vous devez traiter ces deux éléments comme l'un de sorte que vous pouvez créer un conteneur parent et sur ce conteneur, vous pouvez lier événement facilement

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

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