The :hover selector CSS pseudo-class is used to style elements when the mouse hovers over them. It can be used on every element.
We can style the links for unvisited pages using the :link selector, for styling the links to visited pages, use the :visited selector & for styling the active link, use the :active selector. If the :link and :visited selectors are present in the CSS definition then in order to see the effect, we must add :hover selector after it.
Syntax:
element :hover{
// CSS declarations;
}
Example 1: This example illustrates the changing of the background-color on hover over an element.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
color: white;
background-color: green;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
|
Output:
Example 2: This example is showing a hidden block on hover over text.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h3 align="center">
Hover to see hidden GeeksforGeeks.
</h3>
<div> GeeksforGeeks </div>
</body>
</html>
|
Output:
Example 3: This example illustrates the changing of the font-color on hover over an element.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
color: red;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
|
Output:
Example 4: This example illustrates the changing of the font-family of text on hover over it.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
font-family: monospace;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
|
Output:
Example 5: This example illustrates the changing of the text-decoration to underline on hover over an element.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 1.0 and above
- Microsoft Edge 12.0 and above
- Mozilla Firefox 1.0 and above
- Internet Explorer 4.0 and above
- Safari 2.0 and above
- Opera 4.0 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
12 Jul, 2022
Like Article
Save Article