jQuery的 - 區域鼠標懸停不應該在那裏時，懸停div（內）img（用usemap）

Question

我有一個IMG（位置：絕對）和一個文本覆蓋它（位置：絕對）的div。 img有一個圖像映射表，問題是當我想要在懸停和離開該區域時更改img-opacity時，當我將div懸停在圖像上時它會調用mouseleave。有沒有簡單而優雅的解決方案來解決這個問題？

編輯：我想我解決了它與CSS：我給了'指針事件：無'的圖像的股利。

Answer 1

，你可以使用嵌套的條件：

如果（鼠標越過圖像）

{ 如果（鼠標移動到該圖像||如果鼠標在DIV）

{ 

    do the job; 

} 

}

Answer 2

你可以複製的代碼，你可能用的圖像，並將其應用到div

可以說在img的mouseenter上設置opcaity爲一個值，然後在div的mouseenter上做同樣的事情，當div的mouseenter改變圖像的opcity時，同樣複製mouseleave的代碼，以便opcaity被重新設置，如果用戶離開或者股利或圖像：

我犯了一個小提琴：http://jsfiddle.net/KpVag/1/

： http://jsfiddle.net/KpVag/

$('img').on('mouseenter', function() { 
    $(this).css('opacity', '0.4'); 
}); 

$('img').on('mouseleave', function() { 
    $(this).css('opacity', '1'); 
}); 

$('div').on('mouseenter', function() { 
    $('img').css('opacity', '0.4'); 
}); 

$('div').on('mouseleave', function() { 
    $('img').css('opacity', '1'); 
}); 

[編輯] 看到您的評論我做了一個更新的小提琴後

我現在用sto p停止淡出動畫，所以如果鼠標離開圖像，我們開始動畫，但是如果下一個事件是鼠標在我們的div上，那麼我們取消淡出動畫的圖像，如果鼠標後沒有鼠標在DIV那麼動畫沒有被取消：

$('img').on('mouseenter', function (event) { 
    console.log('wrapper mouseenter'); 
    $(this).stop().fadeOut('slow', function() { 
     // on animation finish 
    }); 
}); 

$('img').on('mouseleave', function (event) { 
    console.log('wrapper mouseleave'); 
    $(this).fadeIn('slow', function() { 
     // on animation finish 
    }); 
}); 

$('div').on('mouseenter', function (event) { 
    console.log('wrapper mouseleave'); 
    // stop the image fadein animation 
    $('img').stop(); 
}); 

[/編輯]