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>

Rory McCrossan我会尝试这个但是我担心，因为锚点位于图像地图区域的顶部，当鼠标移动到锚点时（即使我们仍然在地图区域之上），将再次进行悬停调用。

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