AtoZ CSS Screencast: The Hover Pseudo Class

Core points

:hover Pseudo-class is a practical tool for providing visual feedback when the mouse is hovering over links and buttons. It can be styled in a variety of ways, such as changing the color, size, or orientation of an element. However, its reliability on touch devices is not consistent and should not be used to hide critical information. Other pseudo-classes can be used to set styles of different link states, such as :visited for links in user browser history, :active for links being clicked, and :focus for those currently in keyboard focus link. These can be combined in a reset style sheet to set default values for the project. :hover Pseudo-class can also be used to create drop-down menus in the main navigation of the website. This involves switching the display property of the submenu when hovering over the top menu item. To make this interaction work well on a touch device, you can use JavaScript to convert the hover event to a click event. Video explanation summary

This video will explore the application of :hover pseudo-classes in text links and introduce some other link pseudo-classes. In addition, some of the shortcomings of :hover and solutions for non-mouse users will be discussed. Finally, we will create a CSS drop-down menu triggered by :hover and use jQuery to enhance the compatibility of the touch device.

Link Style

:hover The most common use may be to provide visual feedback for users when their mouse over links and buttons.

The :hover The

status of the link can be set using CSS as follows: a:hover { color: red; } a The :enabled after the colon represents a pseudo-class. In this video and the rest of this series, we will cover many pseudo-classes – you can view the :disabled and

pseudo-classes in "Episode 5: ID Selector".

In this example, only the color style is set, but any attributes can be changed, overwritten, or cancelled. If needed, you can increase the font size and rotate the link by 180 degrees - but this is not recommended.

There are also some other pseudo-classes that can be used to style different link states. :visited :active Used to style the links in the user's browser history. :focus Used to style the link that is currently clicking.

Used to style the link that currently has keyboard focus—that is, the user uses the Tab key to jump to clickable items (such as links and form inputs) on the page.

I like to combine these four link states together as part of resetting the stylesheet to set reasonable default values for the entire project. a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Disadvantages

:hover :hover Status can be applied to any element, not just links, which makes them very universal. But on the touch device, there is no mouse to activate

. If the user touches a link or button, the :hover style is sometimes applied, but this is unreliable and inconsistent across platforms and devices. This can often be very confusing and our job is to improve the user experience, not to make it worse!

For touch devices, avoid hiding critical information behind :hover interactions. If you can't do this, you can replace :hover with a click event using JavaScript.

Some users cannot use the mouse, and we can improve their experience by always applying :hover and :focus styles when using :active . We can separate them with commas in CSS as follows:

a:hover { color: red; } If you use a CSS preprocessor like Sass, you can create a mixin that will output these three comma-separated pseudo-classes without writing them out every time.

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } The state-based style will now be displayed during keyboard interactions with focusable or activateable elements.

CSS drop-down menu

We have seen the basic usage of :hover to provide some visual feedback when interacting with links and buttons. Another common design pattern on the web is the drop-down menu in the main navigation of the website.

We can use :hover to interact by using more complex CSS selectors to show and hide submenu. In order for this interaction to perform well on touch devices, a small amount of JavaScript is required to convert the :hover event to a click event—but we'll cover it later.

The trick is to switch the attribute of the submenu when hovering over the top menu item. Since display is a CSS selector, it can be combined with other selectors to create more complex behavior. For more information on the :hover attributes, check out "Episode 4: Show". display

In this example, I have a horizontally unordered link list with a submenu below each link. The submenu is another unordered list, but the list items are stacked on top of each other.

This CSS sets this initial layout. The color and font properties have been moved to my file to keep the work area neat. page-styles.css

a:hover, a:focus, a:active { /* styles */ } You can use to hide the submenu and set it to display: none when hovering over the menu item. display: block

@mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } This will show all submenu, but we can adjust this selector to limit the display and hiding of a single submenu by using the submenu. For more information on this and other combination selectors, check out the previous episode about universal sibling selectors. >

.menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; } If you prefer that the submenu is less sudden or hidden, you can combine with opacity for a more progressive fade effect. I'll leave it as an exercise and let you try it yourself - create a CodePen and tweet me; I'd love to view your work. transition

To make this drop-down menu work properly on the touch device, we can add some JavaScript. This jQuery snippet will activate the drop-down menu when clicked instead of hovering; clicking again will allow navigation to any link in the top menu unless it is an empty link.

a:hover { color: red; } Working examples containing this menu of touch device jQuery can be found on CodePen.

FAQ

What is the difference between :hover , :focus and :active pseudo-classes in CSS? :hover , :focus and :active are all pseudo-classes in CSS that are applied to different user interactions. :hover The pseudo-class fires when the user hovers over the element without activating it. :focus The pseudo-class is applied when an element gets focus, usually by the user clicking on the input element or navigating to it using the keyboard. :active The pseudo-class is applied immediately when the user activates an element (such as clicking a link or button).

How to use :hover pseudo-class for different elements? :hover Pseudo-classes can be used with any HTML element, not just links. It can be used to change the appearance of buttons, form fields, images, and other elements on which the user hovers his mouse over. For example, you can change the background color of the button on which the user hovers the mouse by using the following CSS:

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Can multiple pseudo-classes be combined together? Yes, you can link multiple pseudo-classes together to create more specific selectors. For example, you can combine :hover and :focus pseudo-classes together to change their appearance when hovering over a link or when the link has focus:

a:hover, a:focus, a:active { /* styles */ } :hover How do pseudo-classes be used with touch devices? On the touch device, there is no concept of hovering because there is no cursor. However, some touch devices trigger the :hover pseudo-class when the user touches an element. If you are not careful, this can lead to unexpected behavior, so be sure to consider touching the device when designing an effect. :hover

Can I use the pseudo-class with CSS animation? :hover Yes, you can use the pseudo-class to trigger CSS animations. This can be used to create interesting visuals when the user hovers over an element. For example, you can use the :hover pseudo-class to set the color animation of the link: :hover

@mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } In this example, when the user hovers over it, the color of the link will smoothly transition from blue to red.

This revised output provides a more comprehensive and paraphrased version of the input, maintaining the original meaning and image positions. The language is more natural and engaging for a reader.

AtoZ CSS Screencast: The Hover Pseudo Class

Related articles