Hover in CSS

What is CSS Hover?

The :hover selector in CSS applies styles to an element while the cursor hovers over it. It's frequently employed to produce interactive effects or to draw attention to elements when they're being interacted with.

You can target an element with the :hover selector using its tag name, class, or ID.

For Example:

.button:hover {
  background-color: #ff0000;
  color: #ffffff;
}

The background color in the previous example will turn red (#ff0000) when a user hovers over an element with the class "button," while the text color will turn white (#ffffff).

Various hover effects can be produced by combining the :hover selector with other CSS elements like font size, border, or transform. It's a potent tool for boosting your website or application's visual feedback and interactivity.

Syntax:

:hover {
css declarations;
}

Let's take some examples to understand hover by using CSS:

Example 1:

HTML Code:

CSS Code:

.hover-button {
  background-color: #eaeaea;
  color: #333333;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hover-button:hover {
  background-color: #ff0000;
  color: #ffffff;
}

Explanation:

In the above example, we have a button with a class hover-button. The button's initial color combinations are a light grey background (#eaeaea) and dark grey text (#333333). When the mouse hovers over the button, the background color changes to red (#ff0000) and the text color to white (#ffffff).

With a duration of 0.3 seconds and an ease timing function, the transition property in the hover-button class ensures a fluid transition for the background color change when the mouse hovers over the button.

Other elements, such as links (<a>), images (<img>), divs (<div>), or any other element you want to make interactive, can use similar hover effects. You can create various hover effects suited to your design needs by changing the properties and values within the :hover selector.

Example 2: image zoom effect

HTML Code:

<div class="image-zoom">
  <img src="image.jpg" alt="Image">
</div>

CSS Code:

.image-zoom {
  overflow: hidden;
}

.image-zoom img {
  transition: transform 0.3s ease;
}

.image-zoom:hover img {
  transform: scale(1.2);
}

Example 3: Link Underline Effect

HTML Code:

CSS Code:

.underline-link {
  text-decoration: none;
  transition: border-bottom 0.3s ease;
}

.underline-link:hover {
  border-bottom: 2px solid #ff0000;
}

Feature of Hover in CSS

You can improve the interactivity and visual effects of your web pages by using the CSS:hover feature, which offers a variety of advantages and features. The following are some essential CSS hover features:

Interactive effect: Interactive effects can be produced by altering the appearance of elements when hovered over using the :hover selector. As users interact with your content, you can change properties like background color, text color, opacity, box shadow, transform, and more to show them visual feedback.
Targeting Multiple Elements: You can select multiple elements on a page with the :hover selector. This implies that you can design standardized hover effects for various elements, including buttons, links, images, navigation menus, and any other element you want to make interactive.
Support for Transitions and Animations: The :hover selector can be used with CSS transitions and animations to produce slick, aesthetically pleasing effects. By defining transition or animation properties, you can specify the duration, timing function, and other animation-related settings to regulate how the styles change when an element is hovered over.
Adding Additional Selectors: The :hover selector can be used with other CSS selectors to focus on particular elements or apply styles under predefined criteria. For instance, you can create unique and tailored hover effects by combining the :hover selector with class selectors, ID selectors, or pseudo-elements.
Supporting Accessibility: Accessibility should be considered when developing hover effects. Users of assistive technologies who use a cursor, such as screen readers, might not have access to the hover effect. Because of this, it is advised to check that the primary functionality or content is still readable and usable without hover effects.
Cross-Browser Support: Most modern web browsers support the CSS: hover feature. It is a CSS specification component compatible with most widely used browsers, including Chrome, Firefox, Safari, Edge, and others. This ensures consistency in appearance and behaviour across different platforms.