Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

What is the CSS hover selector?

Farounbi Abiola

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

CSS selectors play a key role in styling an HTML element. Selectors are used to select the HTML elements that you want to apply styles to on a web page; this can either be a class, ID, or attribute.

Pseudo-classes

CSS offers several pseudo-classes to style elements that can help differentiate between various element states. The pseudo-class is a keyword combined with a selector to specify a special state of the selected element(s) in CSS.

For example, the :hover keyword, when combined with a CSS selector, can be used to style an element when the user’s pointer hovers over it.

In this shot, we will mainly focus on the CSS Hover selector, which is a User Action Pseudo-class selector, which styles an HTML element when the user hovers over the element with a cursor. Hover selectors are visible until the user stops hovering over the element with their cursor.

The syntax for the :hover selector is as follows:

css-selector:hover {
	// CSS rules
}

The CSS selector can either be a class, ID, or HTML attribute. The :hover keyword specifies states for which the styles of the CSS rules will be used.

For example:

.group:hover{
      color:purple;
}

When the user hovers over the group class, the color is set to change to purple.

Different use cases of the :hover selector

There are various ways in which the hover selector can be used:

  • Change the color of the text
  • Modify the shape of an image
  • Add transition effects to navbar items
  • Change the background of a button

Code

Change the color of the text

Change the color of a Text

In the example above, the color of the h1 element will change when the pointer hovers over it.

Modify the shape of an image

Modify the Shape of an Image.

In the example above, the image changes the shape when the user’s pointer hovers over it by changing the value of the border-radius in the hover state.

Add transition effects to navbar items

Add Transition Effects to Navbar Items.

In the example above, the hover state is set to have a transition effect of adding a border-bottom to each navbar item.

Change the background of a button

Change the background of a button.

In the example above, the background of the button changes when the pointer hovers over it.

Limitations on different devices

As a user action pseudo-class selector, there are some limitations on how the styles apply to various devices.

  • Mouse: The :hover styling will show when the mouse hovers over an element.

  • Mobile devices: The :hover state will get triggered on click/touch even though there’s no pointer event.

  • Keyboard: The :hover styling will not be triggered because there’s no pointer event.

RELATED TAGS

css
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring