JQuery/Javascript：IE懸停不包括選擇框選項？

我有這個腳本來擴大鼠標懸停的文本框，並縮短mouseoff。JQuery/Javascript：IE懸停不包括選擇框選項？

我遇到的問題是Internet Explorer似乎無法將其懸停在選擇框的選項上。

這意味着在IE中我可以單擊選擇，讓選項下拉，但如果我嘗試選擇一個，它們會消失，選擇框會在我離開選擇框本身時重新調整大小。

示例代碼：

<script type='text/javascript'> 
$(function() { 
$('#TheSelect').hover(
    function(e){ 
     $('#TheText').val('OVER'); 
     $(this).width(600); 
    }, 
    function(e){ 
     $('#TheText').val('OUT'); 
     $(this).width(50); 
    } 
); 
}); 
</script>

和：

<input type='text' id='TheText' /><br /><br /> 

<select id='TheSelect' style='width:50px;'> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option> 
    <option value='5'>Five</option> 
    <option value='6'>Six</option> 
    <option value='7'>Seven...</option> 
</select>

是否有在IE選擇框的任何變通辦法？我甚至會考慮一個jQuery的替代品，如果任何人都可以推薦一個真正可靠的。

謝謝！

來源

2008-10-16 Eli

顯然IE不考慮select元素的下拉位部分。這是可行的，但它需要一些與expando屬性和模糊/焦點事件作弊，以啓用和禁用「隱藏」效果，以阻止它在鼠標進入元素的下拉部分時踢入。

有此一展身手：

$(function() { 
    var expand = function(){ $(this).width(600) } 
    var contract = function(){ if (!this.noHide) $(this).width(50) } 
    var focus = function(){ this.noHide = true } 
    var blur  = function(){ this.noHide = false; contract.call(this) } 
    $('#TheSelect') 
     .hover(expand, contract) 
     .focus(focus) 
     .click(focus) 
     .blur(blur) 
     .change(blur) 
});

（道歉，如果這不是一個如何應該使用jQuery - 我以前從來沒有使用過它:)）

來源

2008-10-16 01:51:08 Dan

貌似這個職位已經有一段時間了，但希望仍有人對解決方法感興趣。在構建我正在開發的新網站時遇到此問題。它是一個產品滑塊，對於每種產品，鼠標懸停在產品上會彈出一個大型信息泡泡，其中包含有關產品的信息，下拉菜單以選擇購買選項以及購買按鈕。我很快發現，只要我的鼠標離開選擇菜單的初始可見區域（即試圖選擇一個選項），整個氣泡就會消失。

答案（謝謝你，聰明的人開發jQuery），都是關於事件冒泡的。我知道解決這個問題最直接的方法就是暫時「停用」懸停狀態。幸運的是，jQuery具有內置的功能來處理事件冒泡（他們稱之爲傳播）。

基本上，只有大約一行左右的新代碼，我在下拉菜單的「onmouseleave」事件中附加了一個方法（鼠標移動到選擇列表中的某個選項似乎可靠地觸發了此事件 - 我試過了其他一些事件，但是這個事件似乎非常穩固），它關閉了事件傳播（即，父元素不允許從下拉列表中聽到關於「onmouseleave」事件）。

就是這樣！解決方案比我預期的要好得多。然後，當鼠標離開泡泡時，懸停狀態通常會觸發，並且該站點繼續進行其業務。這裏的修復（我把它放在document.ready中）：

$(document).ready(function(){ 
    $(".dropdownClassName select").mouseleave(function(event){ 
    event.stopPropagation(); 
    }); 
});

來源

2009-05-01 15:59:19

的作品就像一個魅力:) – WonderLand 2014-12-01 05:09:48

有同樣的問題，並且WorldWidewebb的答案在IE8上工作得很好。我只做了一些小改動，從選擇器中刪除「select」，因爲我在選擇器中包含了選擇框的類。這是一個非常簡單的修復。

此外，我已經實現了使用hoverIntent jquery插件的菜單，沒有任何問題。（沒有干擾）。

來源

2009-08-12 00:39:25 MytyMyky

WorldWideWeb的答案完美無缺。

我有一個輕微的不同的問題，我對包含項目（懸停顯示一個選擇菜單）的表單字段的懸停效果，IE用戶無法從下拉選擇（它保持重置值）。我添加了全球網站的建議（與選擇的ID）和中提琴，它的工作。

這裏就是我所做的：

$(".containerClass").hover(function() { 
    $(this).children("img").hide(); 
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); }); 
}, function() { 
    $(this).children('img').show(); 
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); }); 

});

來源

2009-12-02 19:17:27

我有被隱藏/顯示基於懸停的形式。如果用戶專注於選擇表單變得隱藏。我能解決我的問題是這樣的：

element.find('select').bind('mouseenter mouseleave',function(){ 
    //Prevent hover bubbling 
    return false; 
});

來源

2013-01-08 00:19:44 Sam

JQuery/Javascript：IE懸停不包括選擇框選項？

回答

相關問題