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






                        filter_none








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







                        filter_none








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







                        filter_none








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







                        filter_none








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







                        filter_none








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
    

    

        
        

            
            
        

    


Recommended Posts:
PranchalKatiyar
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.