JQuery / Javascript：IE悬停不包括选择框选项？ [英] JQuery/Javascript: IE hover doesn't cover select box options?

问题描述

我遇到的问题是，Internet Explorer似乎并不支持扩展它悬停在一个选择框的选项。

这意味着在IE我可以点击选择，有选项下拉，但如果我尝试选择一个

示例代码：

$ b $

 < script type ='text / javascript'> 
 $（function（）{
 $（'＃TheSelect'）。hover（
 function（e）{
 $（'＃TheText'）。 ）; 
 $（this）.width（600）; 
}，
 function（e）{
 $（'＃TheText'）。 
 $（this）.width（50）; 
} 
）; 
}）; 
< / script> 
  

和：

 < input type ='text'id ='TheText'/>< br />< br /> 
 
< select id ='TheSelect'style ='width：50px;'> 
< option value ='1'>一个< / option> 
< option value ='2'>两个< / option> 
< option value ='3'>三个< / option> 
< option value = '42，693,748,756'>十二十亿，六百九十三万，七百四十多...< / option> 
< option value ='5'>五< / option> 
< option value ='6'>六个< / option> 
< option value ='7'>七个...< / option> 
< / select> 
  

在IE中的选择框有没有解决方法？

谢谢！

如果任何人都可以推荐一个非常可靠的jquery替换解决方案

显然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的 - 我从来没有使用过before：））

I have this bit of script to widen a text box on mouseover and shorten it on mouseoff.

The problem I am having is that Internet Explorer doesn't seem to extend it's hover over the options of a select box.

This means in IE I can click the select, have the options drop down, but if I try to select one, they vanish and the select box re-sizes as soon as I move off the select box itself.

Example Code:

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

And:

<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>

Are there any workarounds for select boxes in IE? I would even consider a jquery replacement if anyone can recommend one that is really reliable.

Thanks!

解决方案

Apparently IE doesn't consider the drop down bit part of the select element. It's doable, but it takes a bit of cheating with expando properties and blur/focus events to enable and disable the 'hide' effect to stop it kicking in when the mouse enters the drop-down part of the element.

Have a go with this:

$(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)
});

(Apologies if this isn't how one is supposed to use jQuery - I've never used it before :))

这篇关于JQuery / Javascript：IE悬停不包括选择框选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！