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悬停不包括选择框选项？

回答

相关问题