Re: [selectors] [css21] :hover pseudo-class

On Mon, Jan 26, 2009 at 7:17 AM, Giovanni Campagna
<scampa.giovanni@gmail.com> wrote:
> Look at this CSS example:
>
> #my-div {
> display:block;
> width:150px;
> height:150px;
> background-color:red;
> }
> #my-div:hover {
> width:100px;
> heigth:100px;
> }
>
> As you see, when the target is hovered, it is shrinked. The interesting fact
> is that after pseudo-class application, the mouse pointer maybe outside of
> the box, so the element won't be hovered any more, so it will get back
> "default" width and height, so it will be hovered, etc.
> That is, the current :hover definition may cause an infinite loop, a
> flashing red box in my example.
> Also some implementations (WebKit) apply :hover only when the mouse is
> moved, other (Gecko) instead apply them continuosly.
> Is this the expected behaviour?
>
> CSS21 says:
> "User agents are not required to reflow a currently displayed document due
> to pseudo-class transitions".
>
> Does this mean that any box-model related property (any property that is
> applied after reflowing) is ignored in a selector with :active, :hover or
> :focus?
>
> Will something be included also in CSS3 Selectors?

It means that they *may* be ignored, if the UA doesn't want the
complexity and perf hit of reflowing a document like that.  Frex, a
mobile browser may not have the processing power to do that well.

The simple rule is, don't do anything in a :hover class that might
change whether or not the target is hovered.  ^_^

~TJ

Received on Monday, 26 January 2009 13:56:58 UTC