:hover is a pseudo-class used to select and style an element when it is being hovered by the user. An element is hovered over when the user designates it with a pointing device—like pointing at it by placing the mouse over it—without necessarily activating it.
Most touch devices don’t support 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 user. It is usually used to give users visual feedback 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: :link, :visited, :hover, and :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 also used to style links that are being focused (tabbed on using the keyboard). If the :focus pseudo-class is to be used, it is usually placed before the :hover styles in the style sheet. And to remember the order, you could add “fur” in between the previous sentence: “Last Vintage Fur Hat Available”.
Trivia & Notes
Accessibility on Touch Devices
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 users 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 users on devices that don’t offer :hover interactions.
Examples
The following example reverts the color of the text and background of links in a page when they are hovered.
a:link {
color: skyblue;
background-color: white;
}
a:hover {
background-color: skyblue;
color: white;
}
The following example uses CSS transforms to scale an image to 1.5 times its original size on hover.
img:hover {
transform: scale(1.5);
}
The following example increases the opacity of a translucent element to fully opaque when it is hovered.
.element {
opacity: .5;
transition: opacity .5s;
}
.element:hover {
opacity: 1;
}
The :hover interactions are the most popular kind of interactions on desktop. There are a lot of tutorials out there using :hover to create all kinds of interactions in web pages and applications.
Make sure to check the tutorials and playground sections on Codrops for a long list of demos and tutorials using :hover, and more. To get started, you can have a look at these cool Caption Hover Effects and some very popular Original Hover Effects with CSS3, and check any of the other tutorials here out.
Live Demo
The following demo shows how the link styles change on hover. Hover over the links to see their text and background color change.
View this demo on the Codrops PlaygroundThe following demo shows a very simple dropdown menu. Two of the items in this menu have submenus that will appear when you hover over them. In addition to that, the background color of a list item is also changed on hover.
View this demo on the Codrops PlaygroundThe following demo uses CSS transforms to flip a “card” on hover, revealing more information about the item on its back side. You need a browser that supports CSS transforms to see the effect. Check out the browser support to determine whether your browser supports them or not. Hover over the red box to see it rotate in three dimensional space.
View this demo on the Codrops PlaygroundBrowser Support
The :hover pseudo-class is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
Internet Explorer version 6 and earlier, and Opera version 6 and earlier supported the :hover pseudo-class only for links, so applying styles to any other elements on :hover is not possible in those older versions.
