Re: Clarification of :hover and :active

On Mon, Jul 4, 2011 at 6:20 PM, Shane Stephens <shans@google.com> wrote:
> Currently Gecko and WebKit do different things with this:
>
> <style>
> #button:hover:active {background: green;}
> #button:active {background: blue;}
> </style>
> <div id="button">Div button is div</div>
>
> Gecko changes the background to blue when you click on the div and
> then drag out; WebKit leaves the background blue.

Did you mean "leaves the background green"?

> The specification doesn't really say which one is correct - in
> particular "The :hover pseudo-class applies while the user designates
> an element with a pointing device" (from
> http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act)
> seems to leave both behaviors open.
>
> Is this intended to be left up to implementors?

We defer to the host language to define what those actually mean,
which HTML does in
<http://www.whatwg.org/specs/web-apps/current-work/complete/links.html#pseudo-classes>.
 Webkit's doing it wrong.

In particular, note the behavior of this code:

#button:hover { background: green; }
#button:active { outline: thick solid blue; }

We correctly flip the background based on mousein/out, normally, but
if you click and then drag out, we keep the background green.  It
appears that we're not correctly flipping the hover state while the
element is being activated.

~TJ

Received on Thursday, 7 July 2011 00:40:12 UTC