我目前正在為單頁網站設計導覽列的樣式。當使用者將滑鼠懸停在按鈕周圍的 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 而不是按鈕。您只需將 類別移至按鈕即可。