CODEWITHSUNDEEP
csshoverbootstrap-5
YKKY
YKKY

Reputation: 605

Bootstrap hover table: disable hover efect on specific row

Found this question but it doesn't contain the answer to my one as it suggests to set fixed background on the specific row which can ruin the style for example in case bg-gradient is set on the parent.

Either tr.exclude:hover > td {background-color: rgba(0,0,0,0);} or tr.exclude:hover {background-color: rgba(0,0,0,0);} look like just add another background color over the hover's one instead of replace it as the new color appears in case alpha is not 0 but the hover effect is still here if alpha is 0.

Bootstrap's Table documentation says that ".table-hover enables a hover state on table rows within a <tbody>".

But in fact it applies the hover state even for the <tr>s outside the <tbody>.

Is there a working way which would just disable the hover effect on the specific row of the Bootstrap hover table?

Upvotes: 2

Views: 3236

Answers (2)

Pimpfru
Pimpfru

Reputation: 385

Just replace your {background-color: rgba(0,0,0,0);} with {box-shadow: none;}.

Upvotes: 2

Mayank Maurya
Mayank Maurya

Reputation: 46

It's really simple, assign one class to all rows except that specific row on which you don't want the effect to take place.
In table:hover statement use select child class.

HTML:-

<table id="tbl">
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="disabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
</table>

CSS:-

#tbl *, #tbl{
  border:1px solid #000;
}

#tbl:hover .enabled-Hover{
  background-color:#f55;
}

Upvotes: 0

Related Questions