How to use jQuery to disable a CSS rule?

Question

Here's a fiddle to describe the situation
I have a table which has cells that light up with a border on hover:

table td:hover {
  border: 2px solid #3d8b40;
}

When one of them is pressed, I want to make it have a permanent border mentioned above and while it's active (until the next click), I want to disable the lighting on other cells.

The problem seems to have a simple solution to give all cells a class that prevents the border during activation:

.no-border:not(.active):hover {
  border: inherit !important;
}

But there is a lot of cells and I'm afraid that toggling so many classes at once may impact the performance.
Then I also tried this approach:

$('td').click(function() {
  if ($(this).hasClass('active')) {
    $('table td:hover').css('border', 'inherit');
  }
  else {
    $('table td:hover').css('border', '2px solid #3d8b40');
  }
}

The problem with it was that the :hover selector only targeted one cell - the one I was pointing at, and I couldn't figure out how to spread this rule to all of them. And that basically means adding an inline style to an HTML element, which is not better than adding a class when considering performance.

How could I solve my problem?

Maybe add a class to the container element instead of to every cell? — gyre
– gyre, Commented Apr 18, 2017 at 17:25
overwrite it with inline css important is an option? $('table td').attr('style', ':hover {"border": "inherit !important"}') — TypedSource
– TypedSource, Commented Apr 18, 2017 at 17:27

Christian Benseler · Accepted Answer · 2017-04-18 17:27:10Z

2

Here's a fiddle with a solution https://jsfiddle.net/a8xbya33/1/

table.enable_hover td:hover {
  border: 2px solid #3d8b40;
}

<table class="enable_hover">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

$('td').click(function() {
    $(this).toggleClass('active');

  $('table').toggleClass('enable_hover');
})

Add a class to the table that enables the hover (CSS rule). When the user clicks on a , you can toggle this class too.

answered Apr 18, 2017 at 17:27

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use jQuery to disable a CSS rule?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related