This selector is used to style elements when mouse hover over them. It can be used on every element.
Syntax:
element :hover{ CSS declarations; }
Example-1: changing the background-color on hover over a element.
<!DOCTYPE html> < html > < head > < style > h1:hover { color: white; background-color: green; } </ style > </ head > < body > < h1 align = "center" > hover it</ h1 > </ body > </ html > |
Output:
Initial:
On Hover:
Example-2: Showing a hidden block on hover over text.
<!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:
Initial:
On Hover:
Example-3: changing the font-color on hover over a element.
<!DOCTYPE html> < html > < head > < style > h1:hover { color: red; } </ style > </ head > < body > < h1 align = "center" > hover it</ h1 > </ body > </ html > |
Output:
Initial:
On Hover:
Example 4: Changing the font-family of text on hover over it.
<!DOCTYPE html> < html > < head > < style > h1:hover { font-family: monospace; } </ style > </ head > < body > < h1 align = "center" > hover it</ h1 > </ body > </ html > |
Output:
Initial:
On Hover:
Example-5: Changing the text-decoration to underline on hover over a element.
<!DOCTYPE html> < html > < head > < style > h1:hover { text-decoration: underline; } </ style > </ head > < body > < h1 align = "center" > hover it</ h1 > </ body > </ html > |
Output:
Initial:
On Hover:
Browser Support
- Google Chrome 4.0
- Internet Explorer 7.0
- Mozilla firefox 2.0
- Safari 3.1
- Opera 9.6