javascript - JQuery/Javascript : IE hover doesn't cover select box options?

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

看起来这篇文章已经发布了一段时间，但希望仍然有人对解决方法感兴趣。我在构建我正在开发的新网站时遇到了这个问题。它上面有一个产品 slider ，对于每种产品，将鼠标悬停在产品上会弹出一个大的信息气泡，其中包含有关产品的信息、用于选择购买选项的下拉菜单和购买按钮。我很快发现，只要我的鼠标离开选择菜单的初始可见区域(即尝试选择一个选项)，整个气泡就会消失。

答案(谢谢你们，开发 jQuery 的聪明人)就是关于事件冒泡。我知道解决该问题的最直接方法必须是暂时“禁用”悬停的退出状态。幸运的是，jQuery 具有内置的功能来处理事件冒泡(他们称之为传播)。

基本上，仅用大约一行左右的新代码，我就将一个方法附加到下拉列表的“onmouseleave”事件(将鼠标悬停在选择列表中的一个选项上似乎可以可靠地触发此事件 - 我尝试了其他事件很少，但这一个似乎非常可靠)，它关闭了事件传播(即不允许父元素从下拉列表中听到“onmouseleave”事件)。

就是这样!解决方案比我预期的要优雅得多。然后，当鼠标离开气泡时，悬停的退出状态会正常触发，并且网站会继续其业务。这是修复方法(我将其放入 document.ready 中):

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