jQueryは2つの要素を1つの要素として扱います

Question

私はアンカーの形でいくつかのマーカーでオーバーレイされたイメージマップを持っています。 私は現在、各画像マップ領域上のホバリングトリガーと関連したアンカーを有する - 画面に示すように、私は、現在マウスに一方の外に移動したときに、一つとして、これら2つの要素を治療するために必要

ショットそれ以外の場合は、.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は、私はこれをしようとしますが、アンカーがホバーコールがイメージマップ領域の岩下ます階層化されているので、私は恐れていますマウスがアンカーに移動したときに再度作成する必要があります（ただし、まだマップエリアの上にあります）。

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

あなたは一人としてこの2つの要素を処理するために必要なことを言ったようにあなたが親コンテナを作成することができますし、そのコンテナに簡単に

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

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