I am currently styling the navigation bar for a single page website. When the user hovers over the div surrounding the button, I want it to not only change the background color to a darker green (which already works), but also change the text color to white, making it visible. However, even though I've assigned the "hover:text-white" class to the div, the text is still being overwritten.
This is my 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>
My src css file
@tailwind base; @tailwind components; @tailwind utilities;
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem is that you are applying hover:text-white to the div instead of the button. You just move the class to the button .