Question

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!

Answer 1

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