CODEWITHSUNDEEP
htmlcsstailwind-css
Brian Barry
Brian Barry

Reputation: 559

:hover is interfering with child's border

I have a table with <tr>s that, upon hover, dims in brightness. However, when I hover, the children (<td>) lose their black border.

the css:

tr:hover {
  filter: brightness(0.7);
}

td {
 border: 0.5px;
 border-color: black;
}

what is actually looks like using tailwindcss:

              <tr ... className="hover:brightness-75">
                { row.cells.map(cell => (
                  <td ... className="border-[0.5px] border-black">
                    ...                  
                  </td>
              ))}
              </tr>

What am I doing wrong?

Upvotes: 1

Views: 55

Answers (1)

ChenBr
ChenBr

Reputation: 2662

Use border-separate (Border Collapse Utility) and border-spacing-0 (Border Spacing Utility) on your table element to avoid affecting your border.

Tailwind:

<table class="border-separate border-spacing-0 border-[0.5px] border-black">
  <tr class="hover:brightness-75">
    <th class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Firstname</th>
    <th class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Lastname</th>
  </tr>
  <tr class="hover:brightness-75">
    <td class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Chen</td>
    <td class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Br</td>
  </tr>
  <tr class="hover:brightness-75">
    <td class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Brian</td>
    <td class="border-[0.5px] border-black bg-teal-700 p-4 font-bold">Barry</td>
  </tr>
</table>

Tailwind-Play link

CSS:

table {
  border-collapse: separate;
  border-spacing: 0px 0px;
}

Upvotes: 1

Related Questions