Hover in CSS
What is CSS Hover?
The :hover selector in CSS applies styles to an element when the mouse pointer
is placed over it. It is commonly used to create interactive effects or
highlight elements during user interaction.
You can apply the :hover selector to an element by targeting it through its
tag name, class, or ID.
Example
.button:hover {
background:
#ff0000;
color:
#fff;
}
background-color is shortened to background.
The color value #ffffff is shortened to #fff. Both are valid but the shorter
versions are more concise.
A variety of hover effects can be created by using the :hover selector in
combination with other CSS properties such as font size, border, or transform.
It is a powerful tool for enhancing the visual feedback and interactivity of
your website or application.
Syntax
:hover {
/* CSS properties here */
}
Let's explore some examples to better understand how to use hover with CSS:
Example 1
Html code:
<button class="hover-btn">Hover
Me</button>
CSS code:
.hover-btn {
background:
#eaeaea;
color:
#333;
padding:
10px 20px;
border:
none;
cursor:
pointer;
transition:
background 0.3s ease;
}
.hover-btn:hover {
background:
#f00;
color:
#fff;
}
Explanation
In the example above, we have a button with the class hover-btn. Initially,
the button has a light gray background (#eaeaea) and dark gray text (#333).
When the mouse hovers over it, the background changes to red (#ff0000) and the
text turns white (#fff).
With a 0.3-second duration and an ease timing function, the transition
property in the hover-btn class ensures a smooth change in background color
when the mouse hovers over the button.
Similar hover effects can be applied to other elements, such as links
(<a>), images (<img>), divs (<div>), or any element you want
to make interactive. You can customize hover effects based on your design
needs by adjusting the properties and values within the :hover selector.
Example 2 image zoom effect
Html code:
<div class="img-zoom">
<img src="image.jpg"
alt="Sample Image">
</div>
CSS code:
.img-zoom {
overflow:
hidden;
}
.img-zoom img {
transition:
transform 0.3s ease;
}
.img-zoom:hover img {
transform:
scale(1.2);
}
Example 3 link underline effect
Html code:
<a href="#"
class="link-underline">Hover Me</a>
CSS code:
.link-underline {
text-decoration:
none;
transition:
border-bottom 0.3s ease;
}
.link-underline:hover {
border-bottom:
2px solid #f00;
}
Feature of Hover in CSS
You can enhance the interactivity and visual appeal of your web pages with the
CSS :hover feature, which provides various benefits and options. Here are some
key features of CSS hover:
Interactive Effects
You can create interactive effects by changing the appearance of elements when
hovered over with the :hover selector. This allows you to modify properties
like background color, text color, opacity, box shadow, and transform to give
visual feedback to users.
Targeting Multiple Elements
The :hover selector can be used to target multiple elements on a page. This
means you can apply consistent hover effects to buttons, links, images,
navigation menus, and other interactive elements.
Support for Transitions and Animations
You can combine the :hover selector with CSS transitions and animations to
create smooth, attractive effects. By setting transition or animation
properties, you can control how styles change on hover, including duration and
timing.
Adding Additional Selectors
The :hover selector can be combined with other CSS selectors to apply styles
to specific elements or under certain conditions. For example, you can create
customized hover effects by using :hover with class selectors, ID selectors,
or pseudo-elements.
Supporting Accessibility
When designing hover effects, consider accessibility for users who rely on
assistive technologies. Ensure that key functionality or content remains
accessible without hover effects, as users with screen readers or other
assistive tools might not experience these effects.
Cross-Browser Support
Most modern browsers support the :hover feature. It is widely compatible with
browsers like Chrome, Firefox, Safari, and Edge, ensuring a consistent
appearance and behavior across different platforms.
