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中的选择框有没有解决方法?
谢谢!
显然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屋!