Ich gestalte derzeit die Navigationsleiste für eine einseitige Website. Wenn der Benutzer mit der Maus über das Div rund um die Schaltfläche fährt, möchte ich, dass nicht nur die Hintergrundfarbe in ein dunkleres Grün geändert wird (was bereits funktioniert), sondern auch die Textfarbe in Weiß geändert wird, um sie sichtbar zu machen. Obwohl ich dem div die Klasse „hover:text-white“ zugewiesen habe, wird der Text immer noch überschrieben.
Das ist meine 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>
Meine SRC-CSS-Datei
@tailwind base; @tailwind components; @tailwind utilities;
问题在于您将悬停：text-white 应用于 div 而不是按钮。您只需将 类移至按钮即可。