Deactivate hover effect on specific row in Bootstrap hover table

Question

Deactivate hover effect on specific row in Bootstrap hover table

After searching for a solution, I came across this query. However, it did not provide the answer I was looking for. It suggested setting fixed backgrounds on specific rows, but this could potentially disrupt the style if, for example, a bg-gradient is set on the parent element.

The solutions proposed, either

tr.exclude:hover > td {background-color: rgba(0,0,0,0);}

or

tr.exclude:hover {background-color: rgba(0,0,0,0);}

, seem to add another background color over the hover effect rather than replacing it. This results in the new color showing up if the alpha is not 0, while the hover effect remains even when alpha is 0.

According to Bootstrap's Table documentation, ".table-hover enables a hover state on table rows within a <tbody>". However, it seems that the hover state applies to <tr> elements outside of the <tbody>.

Is there a practical solution to simply disable the hover effect on specific rows in a Bootstrap table with hover functionality?

css hover bootstrap-5

Answer 1

Answer №1

To make the change, simply swap out

{background-color: rgba(0,0,0,0);}

with {box-shadow: none;}.

Answer 2

To make the change, simply swap out

{background-color: rgba(0,0,0,0);}

with {box-shadow: none;}.

Answer 3

Answer №2

To easily implement this effect, simply assign a common class to all rows except the specific one where you do not want the effect to occur.
For the table:hover statement, use the child class selector.

Sample HTML code:-

<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 code:-

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

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

Answer 4

To easily implement this effect, simply assign a common class to all rows except the specific one where you do not want the effect to occur.
For the table:hover statement, use the child class selector.

Sample HTML code:-

<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 code:-

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

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

Deactivate hover effect on specific row in Bootstrap hover table

Answer №1

Answer №2

Similar questions

Tips for maintaining the parent's width during a resize operation

"Enhance your website with a dynamic carousel feature using Twitter Bootstrap's JavaScript

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Develop dynamic and stylized CSS using PHP within the Laravel framework

IE11 displaying errors with flex-box layout in Angular8 causing screen misalignment

What is the best way to target CSS only to elements that do not have a parent with a specific class?

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

Tips for implementing jQuery on a CSS selector's :before pseudo-element

Include a back button during the loading of a URL in an Electron application

Utilize CSS to specifically target the image source within a button and swap it with a different image in the Woocommerce Wishlist Plugin on your Wordpress

turn the cube shape into one with smooth, rounded corners

Styling with CSS will keep your content centered on the page, while the background

When attempting to click on my subtopics using jQuery, they do not appear as expected

Bootstrap 5: Position the cards in close vertical alignment with one another

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

The animation fails to function, both when hovering over and when not

Make an element in jQuery draggable but always within the viewport

What is the best way to create pages that showcase 10 posts each?

Having trouble getting your Raspberry Pi web server to display the background image?

Content within a div that is floated left