在 div 内的锚点上多次悬停不起作用，但在 div 本身上工作正常

问：

我正在尝试使用顺风 CSS 在 div 内的锚标签上应用一些悬停效果，但它没有按预期工作。

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

如果我在锚标记中应用悬停效果，则仅应用“文本白色和字体粗体”效果，而 bg-blue 则不应用。

当我在 div 上应用悬停效果时，那么“text-white”并没有应用休息，一切正常。如果我不给 h3 提供 text-color，text-white“可以正常工作，但如果给 h3 提供任何颜色，则无法正常工作。

但另一方面，如果我在 h3 标签上应用悬停效果，则会应用所有效果。

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

这个问题有什么具体原因吗？