CSS：主动选择器

Question

I have an <img> element within a <div> element. I want the entire div (including the image) to scale down 10% (using transform) whenever the <div> is being clicked on. I have gotten it to work, but with one small issue: if the user clicks the image inside the div, nothing happens, whereas if the user clicks the background of the div , it works.

Essentially, how can I get the :active selector of .MyDiv:hover:active { /*scaling logic here*/ } to also work when children of MyDiv are clicked.

All help is greatly appreciated and I always accept an answer!

Answer 1

The :active pseudo-class and the div element

First things first, I'm pretty sure in a div element shouldn't have an activation state in the first place.

If we read through the user action pseudo-classes :hover , :active , and :focus section of the Selectors Level 3 W3C Recommendation , we find this:

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. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

Now if we head over to the Interactive Content section of the HTML5 W3C Editor's Draft , we find this:

Certain elements in HTML have an activation behavior, which means that the user can activate them.

The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to run synthetic click activation steps on the element.

I mention the HTML5 Editor's Draft over the HTML401 Recommendation as the HTML401 document doesn't go into great detail about activation states or user interaction. It does however mention activation on elements like the a element, but doesn't mention anything about it when defining the div element.

The div element doesn't have an "activation state" defined in the HTML5 recommendation. It has no Interactive Content category (unlike the a element ) and doesn't state that an active state can be applied to it.

---

A Workaround

As discussed above, the div element shouldn't accept an :active state. For this reason I'm going to modify the HTML to use an element which does. For this, I'm using the a element:

<a href="javascript: void(0)">
    <img />
</a>

Now this alone doesn't fix the IE issue. If you see this JSFiddle example , when clicking on the img element the a container isn't given an active state. So what can we do to fix this? Instead of just using :hover:active , I'm also going to use :hover:focus :

a:hover:active,
a:hover:focus {
    outline: 0; /* Reset the default anchor tag focus style. */
    background: #f00;
}

This gives us similar functionality on IE and all other browsers, as can be seen in this JSFiddle demo .

Two (potentially undesirable) side effects

1. The problem with this approach is that the element will retain its focussed state and you can now achieve this effect by accessing the element using your keyboard's tab key. Whenever you hover over the element in its focussed state, its style will change. It's not up to me to decide whether this is an undesirable side effect, however.

2. Your element is now a link. The href property is required in order for the element to be focussed in the first place.

Extra styling

As we're now using an a element instead of a div element, so we'll need to reset any browser default styles which distinguish your element as a link. For this we can simply:

a {
    color: #000; /* Reset the color to black. */
    cursor: default; /* Reset the cursor to default. */
    text-decoration: none; /* Remove the underline. */
}

a img {
    border: none; /* Remove border from image. */
}

Final JSFiddle demo .