Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p>The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. See W3 <a href="http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes" rel="nofollow">documentation</a>.</p> </blockquote> <p>But you are applying your <code>:active</code> selector to your <code>&lt;li&gt;</code> element, <strike>which cannot have an active state since it never really gets activated - only hovered. You should apply <code>:active</code> state to <code>&lt;a&gt;</code></strike> &lt;- True for IE 6.</p> <p><strong>UPDATE:</strong> Here's a test sample at <a href="http://jsfiddle.net/easwee/WVrzu/16/" rel="nofollow">jsFiddle</a> as you can see it works ok on <code>&lt;a&gt;</code> element but not ok on <code>&lt;li&gt;</code></p> <p>Interesting info I found <a href="http://doctype.com/active-state-ie8" rel="nofollow">here</a></p> <blockquote> <p>The :active pseudo-class applies while a link is being selected by the user.</p> <p>CSS1 was a little ambiguous on this behavior: "An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader." Also, in CSS1, :active was mutually exclusive from :link and :visited. (And there was no :hover pseudo-class.)</p> <p>CSS2 changed things so that rules for :active can apply at the same time as :visited or :link. And the behavior was explained a little better: "The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it."</p> <p>IMO, FF et al comply with CSS2 better than IE. But since a link is supposed to load a new page, IE could legitimately say the link is still "active" while the new page is loading, which is what happens.</p> <p>You can see a similar counter-intuitive behavior in FF by clicking the link, but moving your mouse off of the link while holding the mouse-button down. The link is not activated (a new page is not loaded), but the link remains in the :active state. On the other hand, Chrome and Opera de-activate the link, but at different times; Chrome as soon as the mouse leaves the link area, Opera not till the mouse button is released. IE behaves the same as FF in this example. (Hit enter after dragging your mouse off the link, and you will see more differences in behavior.)</p> <p>I would not call any of these differences "bugs", because of ambiguities in the spec.</p> <p>The only work-around I can offer is to accept that you can't control every aspect of browser behavior. Users of different browsers have differing expectations of behavior, and if you start messing with user expectation, you're on the wrong path.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload