:hover state on objects with borders

[patrickbruckner]

Hi guys,
my problem concerns the HOVER state of objects with borders,
When is this state triggered?
It is definitly triggered in all browsers, when the mouse is over the object itself(width and height of the object)

But at hovering an object with border, IE(in standards mode) won’t trigger the :hover state, when rolling over the border of an object.
FF does trigger it…

Has anyone got an explanation for this, or is it just another IE Bug?
If so, how can i solve it?

thanks
patrick

[Paulie_D]

Unless you have huge borders I don’t see it as an issue. The vast majority of users will aim for the ‘meat’ of the element and not the border.

[patrickbruckner]

On Dropdown menus it is an issue, because the secondlevel menu disappears when hovering slowly from the trigger element to the secondlevel menu.

and I want to seperate the menues with an 2px border on the toplevel menuentry

[Paulie_D]

Ah yes..I see. I’ve had this problem myself.

2px though is not a lot and most users will be moving fast enough for this not to be a problem but I’ll have a think.

You state that IE is in standards mode…is there a reason why?

[joshuanhibbert]

@patrickbruckner How about rather than using borders, you give the list items a background color equal to the border color and padding equivalent to the border width (assuming you have your styling on the anchors)?

[patrickbruckner]

@Paulie_D It would be annoying to see the dialog going away when moving the cursor too slowly. I noted that IE is in Standards Mode, because i would have expected IE to make such mistakes in Quirks, but not in Standards Mode.

@joshuanhibbert The Idea would be nice, but the top and secondary level menu have got allready a background color.

@cnwtx: The problem with outlines is that you can’t specify just a outline-top, -right, -bottom or -left… outlines are allways arround the whole element and have the same color on all 4 sides.

Although I solved the problem anyway. Instead of declaring a border bottom on the top-level menu, i set a border-top on the second-level menu. This doesn’t affect the :hover-selector of the top-level menu.

This is just a small part of the CSS for this, but just for you to see the generall solution to my problem

.navigation>ul 	 	 { /*border-bottom: 2px solid #DDD;*/ }

.navigation li>ul 	 { display:none; border-top: 2px solid #DDD; }

.navigation li:hover ul { display: block; }

[Author]

Posts