Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of :hover pseudo-class in CSS
The :hover pseudo-class is used to add special styles to an element when a user hovers their mouse cursor over it. This creates interactive effects that enhance user experience and provide visual feedback.
Syntax
selector:hover {
property: value;
}
Example: Link Hover Effect
The following example changes the color of a link when you hover over it −
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #0066cc;
text-decoration: none;
font-size: 18px;
}
a:hover {
color: #FFCC00;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">Hover over this link</a>
</body>
</html>
A blue link appears on the page. When you hover your mouse over it, the link turns yellow and becomes underlined.
Example: Button Hover Effect
The following example demonstrates a button with background color and scale transformation on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover {
background-color: #45a049;
transform: scale(1.05);
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>
A green button appears on the page. When you hover over it, the button becomes slightly darker green and grows 5% larger with a smooth transition effect.
Conclusion
The :hover pseudo-class is essential for creating interactive web elements. It works with any CSS property and can be combined with transitions for smooth visual effects.
Updated on: 2026-03-15T11:26:59+05:30
131 Views
Advertisements