我目前正在为单页网站设计导航栏的样式。当用户将鼠标悬停在按钮周围的 div 上时，我希望它不仅将背景颜色更改为较深的绿色（已经可以使用），而且还使文本颜色变为白色，使其可见。然而，即使我为 div 指定了“hover:text-white”类，文本目前仍被覆盖。
这是我的index.html！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href = "build/output.css">
<title>Food Reviews</title>
</head>
<body>
<div class="grid grid-cols-2 mt-1 ml-2 border-b-2 border-gray-700 bg-gray-200">
<h1 class="text-cyan-400">Food Reviews</h1>
<div class="grid grid-cols-3 ml-64 gap-5 mr-3 mb-1">
<div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600 hover:text-white">
<button class="text-green-600 col-span ">Asian Cuisine</button>
</div>
<div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600">
<button class="text-green-600 col-span">European Cuisine</button>
</div>
<div class="border-4 border-green-700 rounded-lg bg-green-300 hover:bg-green-600">
<button class="text-green-600 col-span-1 pl-2">American Cuisine</button>
</div>
</div>
</div>
</body>
</html>
我的 src css 文件
@tailwind base; @tailwind components; @tailwind utilities;
问题在于您将悬停：text-white 应用于 div 而不是按钮。您只需将 类移至按钮即可。