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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1:hover {
            color: white;
            background-color: green;
        }
    </style>
</head>
  
<body>
  
    <h1 align="center"> hover it</h1>
  
</body>
  
</html>

chevron_right


Output:
Initial:

On Hover:



Example-2: Showing a hidden block on hover over text.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Initial:

On Hover:

Example-3: changing the font-color on hover over a element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1:hover {
            color: red;
        }
    </style>
</head>
  
<body>
  
    <h1 align="center"> hover it</h1>
  
</body>
  
</html>

chevron_right


Output:
Initial:

On Hover:

Example 4: Changing the font-family of text on hover over it.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1:hover {
            font-family: monospace;
        }
    </style>
</head>
  
<body>
  
    <h1 align="center"> hover it</h1>
  
</body>
  
</html>

chevron_right


Output:
Initial:

On Hover:

Example-5: Changing the text-decoration to underline on hover over a element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1:hover {
            text-decoration: underline;
        }
    </style>
</head>
  
<body>
  
    <h1 align="center"> hover it</h1>
  
</body>
  
</html>

chevron_right


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 arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.