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