Go Back   AnandTech Forums > Software > Programming

· Hardware and Technology
· CPUs and Overclocking
· Motherboards
· Video Cards and Graphics
· AMD Video Cards
· Nvidia
· Displays
· Memory and Storage
· Power Supplies
· Cases & Cooling
· SFF, Notebooks, Pre-Built/Barebones PCs
· Networking
· Peripherals
· General Hardware
· Highly Technical
· Computer Help
· Home Theater PCs
· Consumer Electronics
· Digital and Video Cameras
· Mobile Devices & Gadgets
· Audio/Video & Home Theater
· Software
· Software for Windows
· All Things Apple
· *nix Software
· Operating Systems
· Programming
· PC Gaming
· Console Gaming
· Distributed Computing
· Security
· Social
· Off Topic
· Politics and News
· Discussion Club
· Love and Relationships
· The Garage
· Health and Fitness
· Home and Garden
· Merchandise and Shopping
· For Sale/Trade
· Hot Deals with Free Stuff/Contests
· Black Friday 2015
· Forum Issues
· Technical Forum Issues
· Personal Forum Issues
· Suggestion Box
· Moderator Resources
· Moderator Discussions

Thread Tools
Old 12-14-2012, 11:27 AM   #1
Diamond Member
Join Date: Nov 2004
Posts: 3,281
Default Help?: IE8 issue with select - moving mouse to options closes select box

Issue in it's most basic form here:


Only happens in IE8 and earlier.

morkus64 is offline   Reply With Quote
Old 12-17-2012, 10:02 AM   #2
Diamond Member
KB's Avatar
Join Date: Nov 1999
Location: Maryland
Posts: 4,536

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.


$('#button_box').hover(function(){ $('#select_option').show(); }, function(){ $('#select_option').hide(); });
KB is offline   Reply With Quote
Old 12-18-2012, 06:09 AM   #3
Golden Member
GregGreen's Avatar
Join Date: Dec 2000
Location: Durham, NC
Posts: 1,663

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://*************/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.

Last edited by GregGreen; 12-18-2012 at 06:12 AM.
GregGreen is offline   Reply With Quote
Old 01-11-2013, 06:53 AM   #4
Junior Member
Join Date: Jan 2013
Posts: 7

Why would you still use IE ?
baseter is offline   Reply With Quote

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -5. The time now is 01:40 AM.

Powered by vBulletin® Version 3.8.8 Alpha 1
Copyright ©2000 - 2016, vBulletin Solutions, Inc.