jQuery treat hover en dos elementos como un elemento

Question

Tengo un mapa de imagen que he superpuesto con algunos marcadores en forma de anclajes. actualmente tienen un disparador vuelo estacionario en cada área de mapa de imágenes y el anclaje asociado - como se muestra en la imagen de las cámaras

que necesito para tratar estos dos elementos como uno, ya que actualmente cuando el ratón se mueve fuera de uno en el otro, llama al .hover() y la devolución de llamada nuevamente. Quiero llamar a la devolución de llamada por desplazamiento solo cuando el mouse se mueve fuera de cualquiera de los elementos.

Answer 1

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

Answer 2

Aquí está el código que estoy utilizando:

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 Voy a tratar esto, pero he de temer ya que el ancla se acoda sábana de la zona mapa de imagen de la llamada vuelo estacionario se volver a hacer cuando el mouse se coloca en el ancla (aunque aún estemos por encima del área del mapa).

Answer 3

He logrado el resultado deseado: estaba mirando el problema desde el ángulo equivocado, no es un problema de desplazamiento, sino que hace más llamadas 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'); }); 
} 

Gracias a todos los que han ayudado.

Answer 4

como usted ha dicho que es necesario tratar a estos dos elementos como uno para que pueda crear un contenedor primario y en ese contenedor puede enlazar fácilmente evento

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

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