Have Geek Brain

IE 7 CSS problem with mouse over div detection

I have a div inside li as part of the top navigation for a website.

I'm having trouble with IE 7 having "holes" in the box so that the dropdown disappears while the user is still on the dropdown.

I started with a pure CSS solution (li: hover) and it works amazingly in all browsers except IE 7. So now I added a jQuery / javascript solution to detect when the mouse enters and exits the nav li and then add class to show the dropdown. It works better, but if the mouse is not over the image, p, h3 or tag, then it doesn't think I am over the div that is the dropdown. Very frustrating.

I can post some test code, but the problem can be viewed here: http://davincidays.org/

Does anyone have any ideas? I've been working on this for waaaay for a while now and need new things to try.

+2


a source to share


2 answers


OK, I found another similar issue on Stack Overflow: IE7 hover over a div when you touch the child of that div



The background color was the solution. I added BG color to my inner elements and voila! he worked.

0


a source


If you are not using the strict doctype, it is known to cause problems with the hover pseudo-class in IE7. Try changing it to 1.0 strictly so IE doesn't go into quirk mode and see anything for you.



I wasted many wasted hours on this same problem :)

0


a source






More articles:


All Articles