jQuery把两个元素作为一个元素对待

Question

我有一个图像地图，我用锚点的形式覆盖了一些标记。 我现在有各图像地图区域悬停触发器和相关联的锚定 - 如图屏幕截图

我需要这两个元件当作一个，按照目前的当鼠标移出一个入另外，它再次调用.hover()和回调。我只想在鼠标移出任一元素时调用悬停回调。

Answer 1

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

Answer 2

这里是我使用的代码：

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> 

罗里McCrossan我会尝试，但我不怕，因为锚分层ontop的图像映射区域悬停，来电会的当鼠标移动到锚上时（即使我们仍然位于地图区域上方），可以重新生成。

Answer 3

我已经达到了预期的效果 - 我从错误的角度看待问题，这不是悬停问题，而是更多地使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'); }); 
} 

感谢大家谁帮助过。

Answer 4

就像你说的，你需要将这两个元素为一体，使您可以创建一个父容器，你可以绑定事件容易

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

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