CSS :hover Selector
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
Please Login to comment...