The CSS :hover selector is a pseudo-class that applies styles to an element when the mouse pointer is placed over it.
- Applies styles when an element is hovered by the mouse.
- Commonly used with the :link selector, :visited selector, and :active selector to style links in different states.
- Provides visual feedback and improves user interaction.
- Can be used with various HTML elements such as links, buttons, and images.
Syntax:
selector:hover {
property: value;
}
Examples of Hover Effects
Here are some practical examples to illustrate how to add hover effects using CSS.
Example 1: Changing Background Color on Hover
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:hover {
color: white;
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 2: Revealing a Hidden Block on Hover
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
ul {
display: none;
}
div {
background: green;
width: 200px;
height: 200px;
padding: 20px;
padding-left: 50px;
font-size: 30px;
color: white;
display: none;
}
h3:hover + div {
display: block;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h3 align="center">
Hover to see hidden GeeksforGeeks.
</h3>
<div> GeeksforGeeks </div>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 3: Changing Font Color on Hover
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:hover {
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 4: Changing Font Family on Hover
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:hover {
font-family: monospace;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 5: Adding Underline on Hover
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:hover {
text-decoration: underline;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
<!--Driver Code Ends-->
Output:
