CSS for hover (explanation, examples & use cases)

Hover is a pseudo-class in CSS. It is responsible to change an element’s color, background, border, or any other CSS properties while someone places the mouse (hover) over an element. Here are some examples of how you can use the hover in CSS:

a:hover{color: purple; text-decoration: none;}
button:hover{color: white; background: orange; border: 1px solid rgb(248, 73, 9);}
div:hover{background: #E9EBEC;}

See live example & full code in Codepen.

Hover CSS Syntax

any-element:hover{
 color: white;
 background-color: blue;
 /* and other css properties will go here */
}

You may think that the “:hover” can be used only on “a” or link items but in reality, you can use the hover pseudo-class selector on any HTML element. It could be “div, section, p, ul, li, a” or anything else. Just keep in mind the syntax.

Hover Delay (duration)

You can use the CSS transition property to set a time (duration) for the hover effect. See the following examples:

a{transition: all 0.8s ease-in-out;}
a:hover{color: purple;}

button{transition: background-color 0.7s ease-out;}
button:hover{color: white; background: orange;}

On the second example above (button), I changed the duration only for one property (background-color). But for the first example (a), I changed the duration for all the properties.

The transition property accepts 6 types of value: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n). But in most cases, we use the “ease-in-out “.

However, if you want to change only the background color in the transition property, make sure you always use “background-color” instead of “background”. Otherwise, it may not work in all browsers.

/* Good practice */
button{transition: background-color 0.8s ease-in-out;}

/* Bad practice */
button{transition: background 0.8s ease-in-out;}

Also, you have to use the transition property within the parent (main) selector, and not within the “:hover” selector.

Hover an Element and Affect Other Element

Have you ever come across any situation in your web development career where it was required to hover on an element and affect the other element? I will show you some real-world use cases.

For example- we have a “div” with a class name “.benson”, and have another “div” with “.hedges” class inside the “.benson” class. Here is the HTML markup:

<div class="benson">

  <p>Necessitatibus quibusdam commodi accusamus dolores quisquam.</p>
  
  <div class="hedges">
    <ul>
      <li>Sit adipisicing elit</li>
      <li>Vero accusantium assumenda</li>
    </ul>
  </div>

  <p>Quasi porro necessitatibus quibusdam commodi accusamus dolores quisquam fugiat qui enim ut neque.</p>

</div>

Now our goal is to affect the “.hedges” class while hovering on the “.benson” class. Just for the demonstration, we will only change the color & background:

.benson:hover > .hedges {
  color: #13143B;
  background: #CCCCCC;
}

See the live preview on Codepen.

Hover on a Div and Effect Next Div

Here is the HTML markup for example:

<div class="codecanyon">
  <h2>Hover in this section</h2>
  <p>Suscipit eligendi nulla blanditiis nostrum</p>
</div>
<div class="themeforest">
  <h3>This section comes after the section called "codecanyon"</h3>
  <p>Deserunt isi quas temporibus.</p>
</div>

In this example, our purpose is to hover on the first div and take effect on the next div:

.codecanyon:hover + .themeforest {
  color: #FFFFFF; background: #3333F2;
}

See live on Codepen.

Hover on a Div and Affect All the Paragraphs Within This Div

Here is the markup:

<div class="pond">
  <h3>Hover anywhere in this div</h3>
  <span>Labore neque ab consequuntur</span>
  <p>Adipisicing elitxercitationem</p>
  <span>Exercitationem adipisicing elit.</span>
  <p>Elitxercitationem soluta labore aliquid</p>
</div>

In this example, our goal is to affect all the paragraphs while hovering anywhere on the div. The div has a class name:

.pond:hover p {
  color: red; font-weight: bold;
}

Now if you hover anywhere on the div, you will see that the two paragraphs are changing their font color and font-weight.

See this example on Codepen.

Still, have questions about the hover effect? Let me know in the comment.