CSS | :hover Selector - GeeksforGeeks

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
Mozila firefox 2.0
Safari 3.1
Opera 9.6

My Personal Notes

Recommended Posts: