Multiple Hover on anchor inside a div isn't working but working fine on div itself

Issue

I am trying to apply some hover effects on anchor tag inside a div using tailwind CSS but it isn't working as expected.

 <div>
        <a href="#" class="hover:bg-blue-500 hover:text-white hover:font-bold">
          <h3>Find me a product</h3>
        </a>
      </div>

If I apply hover effects in anchor tag then only "text-white and font-bold" effect is being applied and bg-blue is not.

And when i apply hover effects on div then "text-white" is isn't applying rest all working fine."text-white" is working properly if i don't give text-color to h3 but isn't working if i give any color to h3.

But on the other hand if i apply hover effects on h3 tag then all effects are applied.

<div>
        <a href="#" >
          <h3 class="hover:bg-blue-500 hover:text-white hover:font-bold">Find me a product</h3>
        </a>
      </div>

Is there any specific reason for this issue?

Solution

An anchor tag is an inline element, therefore it behaves different from a div, which is a block element by default.

You can add the block class to the anchor to make it display as a block element.

Answered By - whitespace