in IE7 mouseout handler unexpected reset a select-control

[golden]

Only for IE7 (tested in 7.0.5730.11)

Please see example page and try to select any value in select-box:

​http://goldenman.spb.ru/development/jquery/bug_select/test.html

The select-box has binded handler for mouseout event which is trying to modify CSS properties of itself.

However in IE mouseover event happens earlier then user can choose proper value in select-box.

The problem is that mouseout handler of select-box is modifying CSS properties of itself that arise unexpected reset of select-box before user can select need value.

If remove CSS modifying code, it will work fine.

[arrix]

In IE, mouseout event of a parent element triggers when you mouse over its child elements and YUI has normalized this issue. see ​http://www.fitzblog.com/tabid/17782/bid/2127/Nine-Javascript-Gotchas.aspx bulletin 5

Modifying css will collapse the dropdown in IE. This is hard to fix.

[brandon]

Try using the new mouseenter and mouseleave events added in 1.2.2.

[dmethvin]

I verified that the mouseenter/leave events don't fix the problem on jQuery 1.3. As soon as the mouse leaves the original select area in order to select a dropdown item below it, the select box resets due to the .css() change. Happens on IE8B2 as well. Raw DOM does the same thing so it isn't a jQuery-specific bug.

Interestingly, IE8 will not even style the select with select:hover { color: red } although IE8 seems to support hover in most other situations. Everything works fine both ways on FF3 and Chrome.

This looks like an unfixable IE problem.

[anonymous]

Resolution

1. Use mousedown to on selection
2. Use dblclick after selection jQuery 1.5