Tailwind中div hover样式未作用于全部子元素的解决方法

问题根源在于第二个span上的text-gray-500是直接作用在元素上的样式，优先级比父元素hover:text-white继承来的样式更高，所以鼠标悬停时无法被覆盖。以下是几种可行的解决方案：

方案一：直接给第二个span添加hover样式 #

直接在第二个span的class里追加hover:text-white，让hover状态的样式直接覆盖原有灰色：

<div className='flex flex-col hover:bg-red-500 hover:text-white'>
      <span className='font-semibold'>bold text</span>
      <span className='text-gray-500 hover:text-white'>gray text</span>
</div>

方案二：使用Tailwind的group和group-hover变体 #

给父级div添加group类，再给两个span都加上group-hover:text-white，利用更高的选择器特异性覆盖子元素的原有颜色：

<div className='flex flex-col hover:bg-red-500 group'>
      <span className='font-semibold group-hover:text-white'>bold text</span>
      <span className='text-gray-500 group-hover:text-white'>gray text</span>
</div>

这种方式适合需要统一控制多个子元素hover状态的场景，后续新增子元素时，只需给元素加上group-hover:text-white即可同步效果。

方案三：调整颜色继承逻辑 #

如果允许调整默认颜色的继承规则，可以把父元素设置为默认灰色，同时给第一个span单独设置默认黑色，父元素的hover:text-white就能同时作用于两个span：

<div className='flex flex-col text-gray-500 hover:bg-red-500 hover:text-white'>
      <span className='font-semibold text-black'>bold text</span>
      <span>gray text</span>
</div>

这个方案适合需要统一父元素默认文本颜色的场景。

内容的提问来源于stack exchange，提问作者milanHrabos