我有一些脚本在鼠标悬停时加宽文本框并在鼠标移开时缩短它.
我遇到的问题是,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.
谢谢！
解决方法
显然,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 – 我以前从未使用它:))
