CSS - Pseudo-class :hover Property

Quiz

The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.

:hover helps make interactive elements more dynamic and engaging without requiring any user input beyond moving the mouse.

Syntax

:hover {
    /* ... */
}

CSS :hover Example

Here is an example of changing the background color of a link on hover:

<html>
<head>
<style>
    div {
        padding: 1rem;
    }
    a {
        background-color: rgb(238, 135, 9);
        font-size: 1rem;
        padding: 5px;
    }
    a:hover {
        background-color: rgb(235, 235, 169);
    }
</style>
</head>
<body>
    <div>
        <h3>Hover example - link</h3>
        <a href="#">Hover over to see the color change!!!</a>
    </div>
</body>
</html>

Here is an example of changing the background color of a button on hover:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:hover {
      background-color: gold;
   }
</style>
</head>
<body>
      <h3>Hover example - button</h3>
      <button>Hover me!!!</button>
   </div>
</body>
</html>

Here is an example, where border of the link is changing on hover:

<html>
<head>
<style>
   .link {
      color: blue;
      text-transform: uppercase;
      padding: 20px;
      border: 4px solid blue;
      border-radius: 10px;
      display: inline-block;
   }
   .link:hover {
      color: #494949;
      border-radius: 45px;
      border-color: #494949;
   }
</style>
</head>
<body>
   <h3>Hover effect on border of the link</h3>
   <div class="button"><a class="link" href="#">Check my borders on hover</a></div>
</body>
</html>

Here is an example, where box-shadow is added to the link on hover:

<html>
<head>
<style>
   a {
      font-size: 2rem;
      color: #071402;
      margin: 0 .25rem;
      padding: 0 .25rem;
      transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
   }
   a:hover {
      box-shadow: inset 100px 0 0 100px #9ce2cc;
      color: rgb(240, 32, 32);
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

Here is an example, where the background grows over a link on hover:

<html>
<head>
<style>
   a {
      text-decoration-line: underline;
      color: #18272F;
      font-size: 2rem;
      position: relative;
   }
   a::before {
      content: '';

      background-color: rgba(118, 213, 83, 0.75);
      font-size: 2rem;
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;
      height: 10px;
      z-index: -1;
      transition: all .5s ease-in-out;
   }
   a:hover::before {
      bottom: 0;
      height: 100%;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

Here is an example, where the underline of the link gives a rainbow color effect on hover:

<html>
<head>
<style>
   a {
      color: black;
      text-decoration: none;
      }
   a {
      background:
      linear-gradient(
      to right,
      rgb(179, 232, 168),
      rgb(185, 162, 215)
      ),
      linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 200, 50, 1)
      );
      background-size: 100% 5px, 0 5px;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      transition: background-size 700ms;
   }
   a:hover {
      background-size: 0 5px, 100% 5px;
   }
   body {
      display: grid;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 2rem;
      height: 100vh;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

Here is an example, where the a shadow effect is given to a button on hover:

<html>
<head>
<style>
   body {
      display: grid;
      justify-content: center;
      align-items: center;
   }
   .glow {
      padding: 10px;
      width: 250px;
      height: 50px;
      border: none;
      outline: none;
      color: #fff;
      background: #111;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 20px;
   }
   .glow:before {
      content: '';
      background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
      position: absolute;
      top: -4px;
      left:-4px;
      background-size: 400%;
      z-index: -1;
      filter: blur(15px);
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 10px;
   }
   .glow:active {
      color: rgb(246, 235, 235)
   }
   .glow:active:after {
      background: transparent;
   }
   .glow:hover:before {
      opacity: 1;
   }
   .glow:after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #111;
      left: 0;
      top: 0;
      border-radius: 10px;
   }
   @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
   }
</style>
</head>
<body>
   <button class="glow" type="button">HOVER OVER & CLICK!</button>
</body>
</html>

Print Page