jQuery的：的mouseenter，鼠標懸停，鼠標離開，鼠標移出上選擇

我有這樣一個選擇框：jQuery的：的mouseenter，鼠標懸停，鼠標離開，鼠標移出上選擇

<select id="se"> 
    <option>An option</option> 
    <option>Another option</option> 
</select>

我想，當用戶輸入的選擇框鼠標和隱藏，如果用戶在顯示文本用鼠標離開該區域。像這樣：

jQuery('#se').mouseover(function(){ 
    someThing.show(); 
}).mouseout(function(){ 
    someThing.hide(); 
});

第一步工作正常。當我進入選擇框時，文本將被顯示。當我現在點擊選擇框來選擇一個選項時，當鼠標移到一個選項上時，會觸發「mouseout」事件 - 但選項元素是IN選擇元素...我不知道爲什麼，但是jQuery似乎認爲我不在選擇框中。

有沒有解決方案，不用更改HTML代碼？

編輯：我試過了mouseenter，鼠標懸停，鼠標移開，鼠標離開......

來源

2012-08-17 TJR

這是正確的行爲。當你點擊一個元素並且列表消失時，你不再在列表中。 – insertusernamehere 2012-08-17 12:32:53

由於@insertusername在這裏提到，這是正確的行爲。 http://jsfiddle.net/Pnm7J/ – undefined 2012-08-17 12:38:16

究竟應該發生什麼？選擇後「應該」保持一段時間而不是隱藏？ – insertusernamehere 2012-08-17 12:43:04

使用可變isFocus

的JavaScript/jQuery的：

var isFocus = false; 
jQuery('#se').mouseover(function(){ 
    someThing.show(); 
}).mouseout(function(){ 
    if(!isFocus) 
    { 
     someThing.hide(); 
    } 
}).focus(function(){ 
    isFocus = true; 
}).blur(function(){ 
    someThing.hide(); 
    isFocus = false; 
});

來源

2012-08-17 12:34:01

是的。這將是工作 - 但我需要更改HTML。這是一個解決方案 - 但不是唯一的解決方案。但是，謝謝。 – TJR 2012-08-17 12:38:43

這是如何改變行爲的？ – insertusernamehere 2012-08-17 12:48:29

@TimoRütten我已經編輯了答案，請嘗試.. – 2012-08-17 12:51:48

試試這個：

var $someThing = $('#something') 
var stop; 

jQuery('#se').hover(function(){ 
    $someThing.stop().fadeIn(); 
    clearTimeout(stop) 
}, function(){ 
    stop = setTimeout(function(){ 
      $someThing.stop().fadeOut(); 
    }, 2000) 
});

Fiddle

來源

2012-08-17 12:45:41 undefined

如果你想要一個純粹的JS解決方案，真正保留mouseover事件的最簡單方法就是用Allen提出的<div>來包裝它。

我只是簡單地在你所有的<select>的周圍做一個快速的.wrap() method，然後在它們周圍自動添加一個div。然後得到建立像這樣的現場鼠標懸停/ mouseout事件：

jsFiddle DEMO

$('select').wrap('<div class="seWrapper" />'); 

$(document).on('mouseover', '.seWrapper', function (e) { 
     console.log('mouseIN'); 
}); 

$(document).on('mouseout', '.seWrapper', function (e) { 
     console.log('mouseOUT'); 
});

來源

2012-08-17 13:02:35

添加包裝看不到工作..我更新了我的答案.. – 2012-08-17 13:15:16

點擊後，取消綁定mouseout事件和鼠標懸停，結合mouseout事件。

來源

2012-08-17 13:17:42

我用一個計時器來防止mouseleave事件被觸發。它工作得很好。

來源

2014-02-28 20:32:35 cmateusmoraes

jQuery的：的mouseenter，鼠標懸停，鼠標離開，鼠標移出上選擇

回答

相關問題