Saya sedang menggayakan bar navigasi untuk tapak web satu halaman. Apabila pengguna melayang di atas div yang mengelilingi butang, saya mahu ia bukan sahaja menukar warna latar belakang kepada hijau yang lebih gelap (yang sudah berfungsi), tetapi juga menukar warna teks kepada putih, menjadikannya kelihatan. Walau bagaimanapun, walaupun saya telah menetapkan kelas "hover:text-white" kepada div, teks itu masih ditimpa.
Ini index.html saya!
<!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>
Fail css src saya
@tailwind base; @tailwind components; @tailwind utilities;
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Masalahnya ialah anda menggunakan hover:text-white pada div dan bukannya butang. Anda hanya perlu mengalihkan kelas ke butang .