如何在鼠标悬停Div时修改内部文本颜色？样式不生效排查

你的问题根源有两点：

1. 代码语法错误：第二个示例的className属性包含乱码和无效内容（比如hover:textSolution Raleigh broad"样 //itten大意 ��Classification vie），导致Tailwind无法正确识别hover:text-blue-600类，自然不会生效。
2. 样式优先级冲突：即使className写法正确，如果内部<p>标签有自己的文本颜色类（比如text-gray-700），父元素的hover:text-*样式无法自动覆盖子元素样式——因为子元素的类优先级更高。

正确实现方式 #

场景1：<p>无自定义文本颜色

只要保证父元素className语法无误，<p>会继承父元素的文本颜色，hover时自动变色：

<div className="hover:bg-blue-100 hover:border-blue-500 hover:text-blue-600">
    <p>Change textcolor inside here....</p>
</div>

场景2：<p>有自定义文本颜色

使用Tailwind的分组hover功能，通过group标记父元素，再给子元素添加group-hover:text-*类实现hover变色：

<div className="group hover:bg-blue-100 hover:border-blue-500">
    <p className="text-gray-700 group-hover:text-blue-600">Change textcolor inside here....</p>
</div>

验证注意事项 #

• 检查className是否存在拼写错误、乱码或多余字符，确保所有Tailwind类能被正确解析。
• 若子元素有独立文本样式，必须通过group-hover明确指定hover状态的样式，否则父元素的hover样式无法覆盖子元素。

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