CSS | :hover Selector
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
