CSS hover


Go to main Page

Hover effect in CSS

The hover effect in CSS is a mouse over effect. When we mouseover on an element it changes its properties like color, size,background-color, and border, et

The :hover   selector is used to select elements when you mouse over them.

You can use hover effect on all the elements in the document.

Syntax


       p:hover{
    color:green;
}
  




Explaination

We have to use :hover   after the selector and then style it.


Hover on <a> tag

Example


 <!DOCTYPE html>

<head>
   <style>
       a{
           color:black;
           text-decoration: none;

       }
       a:hover{
           color:orangered;
           font-size: 18px;
       }
   </style>
    <title>Document</title>
</head>
<body>
    <a>Click here</a>
</body>
</html>
  





Explaination

When you mouse over on Click here it will change its color and font size.

Hover effect on heading and paragraph

Example


  <!DOCTYPE html>

<head>
   <style>
       p{
           color:black;
           text-decoration: none;

       }
       p:hover{
           color:orangered;
       }
       h1{
           background: green;
           color:white;
       }
       h1:hover{
           background-color:white;
           color:black;
       }


   </style>
    <title>Document</title>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
  




Note: we can use hover effect for all elements.


Hover effect on Button


  <!DOCTYPE html>

<head>
   <style>
  button{
                    background-color: #FF3D12;
                    color:white;
                    outline: none;
                    width: 250px;
                    border:2px solid #FF3D12;
                    padding: 3px;
                    border-radius: 2px;
                    font-size: 20px;
                    margin-top: 10px;
                }
                 button:hover{
                    background-color: transparent;
                    color:#FF3D12;
                    outline:none;
                    border:2px solid #FF3D12;
                    cursor: pointer;
                }


   </style>
    <title>Document</title>
</head>
<body>
<button>Click Me</button>
</body>
</html>
  




Tip:we can add more properties and colors in button.


Hover effect on Image


<!DOCTYPE html>

<head>
   <style>
 img{
     width: 300px;
     height: 300px;
     border:2px solid black;
 }
 img:hover{
     width: 400px;
     height: 450px;
     border:0px;
 }

   </style>
    <title>Document</title>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2021/02/03/14/52/woman-5978200__340.jpg">
</body>
</html>
  





Hover effect on div tag


<!DOCTYPE html>

<head>
   <style>
       body{
           text-align: center;
       }
div{
    width: 500px;
    height: 500px;
    background-color:orangered;
    text-align:center;
}
div:hover{
    width: 300px;
    height: 300px;
    background-color:orange;
}
   </style>
    <title>Document</title>
</head>
<body>
    <div>This is a container</div>
</body>
</html>
  




Note:We can apply hover effect on all elements.