Hovering over a drop-down list ends all :hover states in IE

Take a look at this little demo: http://jsfiddle.net/TnzS4/

Open up the SELECT box, and hover its the drop-down list.

In Chrome, FF, Safari and Opera, the box is red,开发者_如何转开发 which means that the :hover state is still active.

In IE, the box is gray, which means that the :hover state is inactive.

Is this an IE bug?

Edit: Please open the above page in your version of IE and report (via a comment) whether you have this behavior or not.

---

I still see this problem. I am using IE 8, and the problem is there. @treeface, are you using build 8.0.6001.18702 ? @Šime, you don't see the problem anymore in IE8?

I was the one who originaly brought this to Šime's attention, and as such, I'd like to re-open this question, to perhaps find out why my Internet Explorer is having this issue, while it seems that noone else's is?

So really, you all are not having this issue?

According to my IE Developer bar, this problem exists for me in Browser Mode: IE8, IE7, and IE8 Compatibility view. Also tested with the different Document Modes(IE7 Standards, IE8 Standards, Quirks Mode), but all give the same bug.

---

I might as well turn this into an answer since I can't really close this given that it's an entirely valid question. As Andrew Sehr discovered, this problem doesn't seem to happen in IE<=7. I confirmed that it doesn't happen in IE8, and then I found that it doesn't happen in the latest release of the IE9 platform preview. As such, I think we can chalk this one up to a temporary bug in the IE9 beta channel (though it's hard to call something a "channel" when the last release was nearly 3 months ago).

Nice find, Šime.

---

Edit: The first time I read this question, I completely missed the part about how you're first supposed to open the select box, then hover over the options. When this happens, it seems all versions of IE (including IE9's latest platform preview) does not consider the div underneath to be in a :hover state. This is all down to the way IE still handles events in a select element. The sad fact of the matter is that there is no pure CSS way to get around this. You'll need to manipulate events in JavaScript.

The bad news is that this will only get you part of the way there. Consider this:

http://jsfiddle.net/TnzS4/5/

$('#wrap > select').focus(function() {
    $('#wrap').addClass('wrap_hover');
}).blur(function() {
    $('#wrap').removeClass('wrap_hover');
});

Here you're not losing the :hover when you hover over the option elements, but you also aren't dropping the :hover when you mouseout of the #wrap element. If this behavior is unacceptable to you, then you won't be happy to know that you'll have to test for IE in your JS because otherwise this code will duplicate the behavior in all browsers.

So I suppose this is what a dead end looks like. If I were you, I'd either ignore the issue (if anybody ever complained I'd tell them to not use a shit browser) or I'd get rid of the :hover effect and find another way to reach whatever UI goal you're trying to achieve.