jQuery / Javascript：IE懸停不覆蓋選擇框選項嗎？

Question

我有這段腳本可以在鼠標懸停時加寬文本框，在鼠標懸停時將其縮短。

我遇到的問題是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中的選擇框是否有任何變通辦法？ 如果有人可以推薦一個真正可靠的替代品，我什至會考慮用一種替代品。

謝謝！

Answer 1

看起來這篇文章已經有一段時間了，但是希望仍然有一些人對解決方法感興趣。 在建立我正在處理的新網站時，我遇到了這個問題。 在它上面是一個產品滑塊，對於每個產品，將鼠標懸停在該產品上會彈出一個大的信息氣泡，其中包含有關該產品的信息，用於選擇購買選項的下拉菜單和一個購買按鈕。 我很快發現，只要鼠標離開選擇菜單的初始可見區域（即嘗試選擇一個選項），整個氣泡就會消失。

答案（感謝開發jQuery的聰明人）完全是關於事件冒泡的問題。 我知道解決此問題的最直接方法必須是暫時“禁用”懸停狀態。 幸運的是，jQuery具有內置功能來處理事件冒泡（他們稱其為傳播）。

基本上，只有大約一行新代碼，我為下拉菜單的“ onmouseleave”事件附加了一個方法（將鼠標懸停在選擇列表中的一個選項上似乎可以可靠地觸發此事件-我嘗試了其他一些事件，但此功能似乎非常可靠），從而關閉了事件傳播功能（即，不允許父元素從下拉列表中聽到“ onmouseleave”事件）。

就是這樣！ 解決方案比我期望的要優雅得多。 然后，當鼠標離開氣泡時，懸停的退出狀態將正常觸發，並且該站點將繼續其業務。 解決方法如下（我將其放在document.ready中）：

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

Answer 2

顯然，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的方式，我以前從未使用過它：））

Answer 3

我有一個基於懸停隱藏/顯示的表單。 如果用戶專注於選擇，則表單將隱藏。 我可以通過以下方式解決我的問題：

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

Answer 4

WorldWideWeb的答案非常有效。

我有一個稍微不同的問題，我對表單字段的包含項（將鼠標懸停以顯示選擇菜單）產生懸停效果，並且對IE用戶無法從下拉菜單中進行選擇（它一直在重置值）。 我添加了Worldwideweb的建議（帶有選擇的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(); });

});

Answer 5

遇到了同樣的問題，WorldWidewebb的答案在IE8上效果很好。 我做了一點改動，從選擇器中刪除了“選擇”，因為我在選擇器中包括了選擇框的類。 使其變得非常簡單。

另外，我在使用hoverIntent jquery插件的菜單上實現了它，沒有任何問題。 （無干擾）。