我目前正在为一个单页网站设计导航栏的样式。当用户将鼠标悬停在我的按钮周围的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;
2条答案
按热度按时间kzipqqlq1#
这里的问题是你将hover：text-white应用到div而不是按钮上。你只需要移动class to the button。
ljo96ir52#
将类
text-white添加到所有三个button标记中，并将其从第一个父div中删除！https://play.tailwindcss.com/sozHzwFuBx