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

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: ``` ``` And: ```

Accepted Answer

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 hover doesn't cover select box options?

Solution

Problem