Exploring the :active pseudo-class with the div element
Upon initial inspection, it seems inappropriate for a div element to have an active state.
Referencing the user action pseudo-classes :hover, :active, and :focus section of the Selectors Level 3 W3C Recommendation, it becomes clear that:
The :active pseudo-class is relevant while an element is being activated by the user. This applies during the duration between pressing and releasing the mouse button. It primarily pertains to the primary mouse button and its equivalents on multi-button systems.
Shifting focus to the Interactive Content section of the HTML5 W3C Editor's Draft reveals:
Specific HTML elements exhibit activation behaviors, allowing users to interact with them. The user agent should facilitate manual triggering of elements with activation behaviors through various means like keyboard inputs, voice commands, or mouse clicks. Non-click interactions should trigger synthetic click activation steps on such elements.
Unlike the HTML401 Recommendation, which lacks depth in discussing activation states or user interaction, the HTML5 recommendation emphasizes this area. While activation mechanisms are addressed for elements like the a tag, no mention of such behavior is made for the div element.
The div element doesn't possess a defined "activation state" in the HTML5 guidelines. Unlike the a element, it falls outside the purview of Interactive Content, with no provision for applying an active state.
A Creative Solution
In light of these observations, facilitating an :active state for the div element appears incongruous. To address this concern, let's enhance the HTML structure using an element equipped to handle such states – the a tag:
<a href="javascript: void(0)">
<img />
</a>
To resolve the IE issue persisting after adopting this approach, incorporation of both :hover:active and :hover:focus selectors is warranted:
a:hover:active,
a:hover:focus {
outline: 0; /* Reset default focus style for anchors. */
background: #f00;
}
This adjustment ensures uniform functionality across browsers, as demonstrated in this JSFiddle demo.
Potential Implications
An inadvertent consequence may arise from retaining the focused state of the element, enabling access via the keyboard's tab key. Hovering over the element in its focused state triggers a visual change. The subjective nature of whether this effect is desirable remains open to interpretation.
Transforming your element into a link necessitates inclusion of the href property to enable focus initially.
Enhanced Styling
Given the transition to an a element from a div element, resetting browser defaults distinguishing the element as a hyperlink is essential. Achieve this through:
a {
color: #000; /* Restore text color to black. */
cursor: default; /* Reinstate default cursor. */
text-decoration: none; /* Eliminate underlines. */
}
a img {
border: none; /* Remove image borders. */
}
Final JSFiddle demo.