:hover is a pseudo-class used to select and style an element when it is being hovered by the . An element is hovered over when the designates it with a pointing device—like pointing at it by placing the mouse over it—without necessarily activating it. 82w4a

Most touch devices don’t hover interactions. Using :hover on touch devices can cause problems like unexpected effects and interactions. This is because the :hover state of an element is sometimes fired for a split second when the element is touched.

:hover is a dynamic pseudo-class that matches when an element is being hovered by the . It is usually used to give s visual that the element they’re pointing at has been indeed hovered and may be activated. It is also used to show secondary content when certain elements are hovered. For example, it is very common to use hovering over a list item in a navigation menu to open a submenu of that item.

:hover is also used in conjunction with other pseudo-classes to style links in a page. The four classes used to style links include: :active.

When the four link styling pseudo-classes are used, they are preferably used in the order mentioned above. For example:

a:link {
    /* style links */
}

a:visited {
    /* style visited link */
}

a:hover {
    /* hover styles */
}

a:active {
    /* active state styles */
}
                

The :hover styles may be overridden by styles of other pseudo-classes depending on the order in which they appear in the style sheet. In order to style links appropriately and avoid certain styles to be overridden by others, it is recommended that the four pseudo-classes be used in the order listed above.

The order can be easily memorized using mnemonics, like “Last Vintage Hat Available”. You can create your own one over at spacefm.com.

In addition to the four pseudo-classes mentioned, the :focus pseudo-class is to be used, it is usually placed before the :hover styles in the style sheet. And to the order, you could add “fur” in between the previous sentence: “Last Vintage Fur Hat Available”.

Accessibility on Touch Devices 6l1a4x

Sometimes :hover states are used to show content when certain elements are hovered. This means that the content would otherwise not be accessible if elements cannot be hovered over. This introduces an accessibility problem on touch devices, where s won’t be able to access some content because of the lack of hover interactions on those devices. So, it is recommended that suitable fallback is provided for touch devices to make sure that all content is available for s on devices that don’t offer :hover interactions.

a:link {
    color: skyblue;
    background-color: white;
}

a:hover {
    background-color: skyblue;
    color: white;
}
                

img:hover {
    transform: scale(1.5);
}
                

.element {
    opacity: .5;
    transition: opacity .5s;
}

.element:hover {
    opacity: 1;
}