Mouse curser hover over element's margin validly hover state?

Forum Moderators: not2easy

Message Too Old, No Replies

Mouse curser hover over element's margin validly hover state?

Mostly relates to mouse hover over menus that vertically resize on hover.

JAB Creations

4:11 pm on Sep 28, 2008 (gmt 0)

I've noticed that IE8, Opera 9.5, and Safari 3 all agree that the mouse cursor over an element's margin still counts as the element being in the hover state. However this is not the case even in the latest nightly build of Firefox. The desirable situation is what IE, Opera, and Safari are all doing though I'm curious about what the W3C has to say.

This topic arose for me when I was attempting to think of a way to work around visual flickering between the normal and hover states on my site's menus in Firefox when you move your mouse over that one pixel which is actually more often then you'd imagine.

The menus change in height and so the top border moves down a single pixel helping to visually aid the user that the menu is currently being hovered by their mouse. However I'm now working on a way to work around this issue. I'm thinking of filing a bug on Gecko though is I can verify the what the validity of what the other browsers are doing. Thoughts?

- John

JAB Creations

4:32 pm on Sep 28, 2008 (gmt 0)

After I created a large test case it looks Firefox has corrected this issue in the latest nightly build. Keep in mind this bug still occurs when you move the mouse around however at least when the cursor is still the flickering no longer occurs unlike in Firefox 3.0.

Here is the test case...

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
div {border: #000 dotted 10px; float: left;}
div div {border: #000 solid 10px; height: 400px; margin: 100px; width: 400px;}
div div:hover {border: #f0f solid 10px; height: 300px; margin: 200px 100px 100px 100px; width: 400px;}
</style>
</head>
<body>
<div>
<div><p>Please move your mouse over the solid inner divisible element.</p></div>
</div>
</body>
</html>

swa66

8:05 pm on Sep 28, 2008 (gmt 0)

I'm not all that convinced that browsers should take the margin area in account as a hover indication.

First of all margins can be negative: does it mean it should reduce the hover area ? This can lead to elements not having hover at all.

Secondly margins can collapse, causing multiple elements to share a margin, which of them (can quite a lot of them) should be hovered?

Lastly, one can use huge margins to create e.g. space for holding floats in multi-colums layouts etc. Should such a "column" actually hover what's next to it ?

I tried to find guidance in the CSS2.1 specs but found none (I might not have found it, or it might not be there, hard to tell which).

I think the "obvious" solution is to use padding (it'll also make the background larger).

The CSS2.1 text does say that UAs don't need to honer statements that case a redraw on hover (so the changing height, margin etc can safely be ignored by a browser as far as I understood it.)

JAB Creations

8:44 pm on Sep 28, 2008 (gmt 0)

Obviously if the spec allowed hover on margins it would only allow it for positive values.

Collapsed margins is the fool's gold of CSS and should have never been introduced as it makes simple math complex and forces us to use padding when it should be margins unnecessarily complicating layouts with absolutely no advantage gained.

I used to use negative margins in conjunction with floats though I haven't for the past two years now thanks to better tactical placement of XHTML elements.

Using padding would not work, the border-top would obviously be in the same position as padding is between the content and border, not the border and margin.

- John