0

I'm using Semantic UI library, and my <tr> table elements have a hover effect on them from the "selectable" class on the table.

But I would like to disable this hover on specific rows(when they enter edit mode) without having to edit the css files (As my scope is only html/javascript, I'm only trying to mend an old issue)

I tried using pointer-events:none; but in my case there are other buttons inside the <tr> and they got disabled

Javascript event on the rows :

$('body').on('click', '#edit_card table tbody tr .link.icon.edit', function(){
    var row = $(this).closest('tr');
    switch_row_to_editing_mode(row);
  })

CSS styling from the element inspector :

enter image description here

Mojimi
  • 2,561
  • 9
  • 52
  • 116
  • Where's the "*[mcve]*" code? Which rows do you want to style, and not-style? What CSS did you try to enable this, where did it fail? *How* did it fail? – David Thomas Jan 30 '17 at 18:04
  • @DavidThomas well I just thought there was no need to tag this question with Jquery/Javascript and provide uneccessary context – Mojimi Jan 30 '17 at 18:07
  • Unnecessary context such as the HTML and CSS that applies to the elements you want to style? – David Thomas Jan 30 '17 at 18:07

3 Answers3

1

Without editing the CSS files you will have to use inline CSS (not recommended) but the syntax would be:

<tr style="background: white !important">

...which would stop the colour altering on hover

mayersdesign
  • 5,062
  • 4
  • 35
  • 47
  • You - almost certainly - don't need to add `!important` to an in-line style (and in almost every case I've ever seen `!important` tends to reflect something chaotic and terrible behind the scenes). – David Thomas Jan 30 '17 at 18:03
  • I thought it might be required to trump the :hover style in the CSS files. I don't recommend inline CSS or using !important (in general), but merely wanted to solve the OP's question, which I think this would. Albeit "double" inelegantly :) – mayersdesign Jan 30 '17 at 18:04
1

The solution depends on how you distinguish what rows you want to disable the css on. Two options are adding a special class to the <tr> in the html or using JavaScript.

Option 1

Add a special class to the tr's and make your own css.

css:

.row_with_exception {
    // custom css
}

html:

<tr class='row_with_exception'></tr>
<tr class=''></tr>
<tr class='row_with_exception'></tr>
<tr class=''></tr>

Option 2

Use Javascript to update the styling on the rows.

First get the rows you want to remove the hover from.

elements = [...] // array of jquery elements

Then for each element add custom css using JQuery.

elements.map(function (el) {
   el.css(...)
}
zlwaterfield
  • 841
  • 1
  • 9
  • 18
  • So, to override the external css, do I just leave it blank? where you put "custom css" – Mojimi Jan 30 '17 at 18:23
  • No you will put the css you want on the item, I wasnt sure what changed you wanted but you could do `.row_with_exception:hover{ color: red }` – zlwaterfield Jan 30 '17 at 21:17
1

If what you wanted to avoid is changing the css will screw up your well done job, then try to add a new class instead and apply it to the specific rows you wanted to disable

Have you seen CSS disable hover effect?

Community
  • 1
  • 1
Sukma Raharja
  • 11
  • 1