jQuery：檢查鼠標是否在元素上

我正在處理以下情形：我有一個帶有熱點的圖像映射。當您將鼠標懸停在圖像地圖上的<area>上時，顯示<div class="info-panel">。該div與<area>重疊，所以div隱藏在<div class="info-panel">的鼠標葉片上。jQuery：檢查鼠標是否在元素上

這很適合，但在奇怪的情況下，例如，如果您發射彈道並且移動鼠標太快，則div保持不變。我認爲它可能在<area>和<div>相交的小型實例中。我不會擔心，只有客戶指出它是一個錯誤。

我認爲解決這個問題的唯一方法就是在信息窗口可見的情況下檢查鼠標移動。如果是，則檢查鼠標是否正在覆蓋它 - 如果不是，則隱藏它。這將確保如果鼠標不在其上，則信息窗口永遠不可見。

我的問題是：如何檢查當前鼠標位置是否在信息窗口之上？請記住，這是針對例外情況而非規則，並且我確實不知道信息窗口是否可見？

來源

2010-07-08 pingu

當你的鼠標有1秒後運行的計時器，例如，關閉所有窗口。

當你的鼠標懸停時，一定要刪除該定時器...所以定時器只有當你mouseout設置。

喜歡的東西：

var timer; 
$(".window").mouseout(function(){ 
    $(".window").hide(); // regular hide 

    // run the same thing after 1 second 
    // to catch windows that are still open 
    timer = setTimeout(function(){ 
     $(".window").hide(); // regular hide 
    }, 1000); // 1 second 
}); 

// be sure to remove the timer when you mouseover 
$(".window").mouseover(function(){ 
    clearTimeout(timer); 

    // other stuff 
});

來源

2010-07-08 12:49:01

啊哈！我認爲這將起作用，現在將實施......謝謝！ – pingu 2010-07-08 12:52:13

而不是mouseover嘗試mouseenter和mouseleave作爲事件處理程序。

來源

2010-07-08 12:47:48 jAndy

我使用鼠標懸停的區域，鼠標離開了div ...在這個區域使用mouseenter在這裏不會有什麼不同。 – pingu 2010-07-08 12:48:58

試試這個：

function show_info (thelink,info_panel) { 
    var timer; 
    timer = setTimeout(function(){ 
     $(info_panel).stop(true, true).fadeIn('normal'); 
    }, 300); 
    $(thelink).mouseout(function(){ clearTimeout(timer); }); 
} 

function hide_info (resim) { 
    $(info_panel).stop(true, true).fadeOut('normal'); 
}

和HTML代碼應該是：

<a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#info_panel');">The link</a> 
<div id="info_panel" onmouseout="hide_tipbox('#info_panel');">Info Panel Content</div>

來源

2012-02-02 04:55:55

jQuery：檢查鼠標是否在元素上

回答

相關問題