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