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中的选择框是否有任何变通方法？如果有人能推荐一款非常可靠的话,我甚至会考虑更换jquery.

谢谢!

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 - 我以前从未使用它:))