Je stylise actuellement la barre de navigation pour un site Web d'une seule page. Lorsque l'utilisateur survole le div entourant le bouton, je souhaite non seulement qu'il change la couleur d'arrière-plan en un vert plus foncé (ce qui fonctionne déjà), mais également qu'il change la couleur du texte en blanc, le rendant ainsi visible. Cependant, même si j'ai attribué la classe "hover:text-white" au div, le texte est toujours écrasé.
Voici mon 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>
Mon fichier CSS src
@tailwind base; @tailwind components; @tailwind utilities;
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème est que vous appliquez hover:text-white au div au lieu du bouton. Il vous suffit de déplacer la classe vers le bouton .