jQuery將兩個元素懸停在一個元素上

Question

我有一張圖像地圖，我用錨點的形式覆蓋了一些標記。 我目前在每個圖像映射區域和相關錨點上都有一個懸停觸發器 - 如屏幕截圖所示

我需要將這兩個元素視為一個，因為當鼠標從一個移出另一個時，它會再次調用.hover()和回調。 我只想在鼠標移出任何一個元素時調用懸停回調。

Answer 1

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

Answer 2

正如您所說，您需要將這兩個元素視為一個，這樣您就可以創建父容器，並且可以在該容器上輕松綁定事件

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

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

Answer 3

這是我正在使用的代碼：

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 4

我已經設法達到了預期的結果 - 我從錯誤的角度看問題，這不是懸停問題，而是更多地進行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'); });
}

謝謝所有幫助過的人。