Question 43625 in Html Question posted in
Some basic documentation can be found here.

Why is my hover state for Tailwind CSS not working? – Html

I am currently working on styling the nav bar for a single page website. When a user hovers over the div that surrounds my button, I want it to not only change the background-color to darker shade of green(which already works) but also make the text color white so it’s visible. However, the text is currently being covered up even though I specified "hover:text-white" class for the div.

Here 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;
Tags:

2

Answers


  1. 0

    The issue there is that you are applying the hover:text-white to the div and not to the button. you just need to move the class to the button.

    Login or Signup to reply.
  2. 0

    Add the class text-white to all three of your button tags and remove it from the first parent div!

    https://play.tailwindcss.com/sozHzwFuBx

    <!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="mt-1 ml-2 grid grid-cols-2 border-b-2 border-gray-700 bg-gray-200">
    <h1 class="text-cyan-400">Food Reviews</h1>
    <div class="ml-64 mr-3 mb-1 grid grid-cols-3 gap-5">
      <div class="rounded-lg border-4 border-green-700 bg-green-300 hover:bg-green-600">
        <button class="col-span text-green-600 hover:text-white">Asian Cuisine</button>
      </div>
      <div class="rounded-lg border-4 border-green-700 bg-green-300 hover:bg-green-600">
        <button class="col-span text-green-600 hover:text-white">European Cuisine</button>
      </div>
      <div class="rounded-lg border-4 border-green-700 bg-green-300 hover:bg-green-600">
        <button class="col-span-1 pl-2 text-green-600 hover:text-white">American Cuisine</button>
      </div>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search