Help?: IE8 issue with select - moving mouse to options closes select box

[morkus64]

Issue in it's most basic form here:

http://jsfiddle.net/3qVv7/88/

Only happens in IE8 and earlier.

Thanks!

 

[KB]

Its happening in IE9. Once you leave the select box and hover over the dropdown items it hides again. Maybe try changing from a CSS hover/hide scheme to a jquery show/hide method.

http://api.jquery.com/hover/

$('#button_box').hover(function(){ $('#select_option').show(); }, function(){ $('#select_option').hide(); });

 

[GregGreen]

I spent a little time playing with this and I don't have an exact solution for you. While playing around in IE8's dev tools, you can kind of see that IE just doesn't respect that your option tags are inside the div #button_box.

Partially because of this and partially because the desired effect isn't great UX design, I did a little rewriting of your fiddle. http://jsfiddle.net/3qVv7/111/

Using jQuery, I've bound an event handler that fires when you hover over the #button_box. This event handler will change #form_box's display to block, just like your CSS :hover selector did. Inside this event handler, I bound another event handler that fires when you change the value of your select dropdown (as opposed to on mouseleave, like :hover would do). This event handler will hide #form_box again.

Also, I moved your onChange inline JS into the anonymous function that is called on the second event handler I created (it's commented out so as to not throw any errors). It's not a good practice to have inline JS. It's best to have all JS interactions in one place as it will be much more maintainable in the long run.

If this jQuery solution isn't acceptable to you (and maybe even if it is), I think you need to go back and rethink what you're trying to do. Maybe in your real example there's a great purpose for it, but, in general, it's not very user-friendly to have content hidden for the sake of it being hidden. I'm also not sure how comfortable I am with using :hover (and CSS overall) for user interactions, but that's a discussion for another day.

PS: I took the time to try using the .hover method KB suggested, but it has the same issue as using CSS :hover.

 

[baseter]

Why would you still use IE ?