How to make CSS styles override JavaScript applied styles

Question

I create an HTML table dynamically, and apply some styles:

var tbl = document.createElement('table');

tbl.id = "CrewMemberTable";

document.getElementById("CrewMemberPanel").appendChild(tbl);

I then insert rows and cells in the table (just three in this example for brevity):

CrewRow = document.getElementById("CrewMemberTable").insertRow(-1);

CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "this text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "some text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";

On this last cell, I apply a style, via javascript:

CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell.style.backgroundColor = "GREEN";

Finally, I have this style in my .CSS stylesheet:

#CrewMemberTable tr:hover {
    background-color: RED !important;
}

When I run it, strictly speaking, I guess nothing is wrong. It's doing what I asked it to do.

BUT - I want the hover to cover the entire row, but instead it only covers the first two cells, and the last cell, where the background color was assigned in javascript, it remains green. I want the entire row red.

Is this possible? And how?

If you have access to both the CSS and the JavaScript why not define a class, in your CSS, for the relevant <td> and then add that class, instead of the style, with your JavaScript? — David Thomas
– David Thomas, Commented Aug 23, 2018 at 1:43

kenS · Accepted Answer · 2018-08-23 01:05:44Z

1

You will need a selector with greater specificity, such as

#CrewMemberTable tr:hover, #CrewMemberTable tr:hover td {
    background-color: RED !important;
}

You will particularly want to target the cell in addition to the row. (If you wanted you could add a class or id to the cell to facilitate higher-specificity targeting.)

See snippet below for a working example using the code structure you have provided in your question:

var tbl = document.createElement('table');
tbl.id = "CrewMemberTable";
document.getElementById("CrewMemberPanel").appendChild(tbl);
CrewRow = document.getElementById("CrewMemberTable").insertRow(-1);
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "this text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "some text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell = CrewRow.insertCell(-1); CrewCell.innerHTML = "more text";
CrewCell.style.backgroundColor = "GREEN";

#CrewMemberTable tr:hover, #CrewMemberTable tr:hover td {
        background-color: RED !important;
    }

<div id="CrewMemberPanel"></div>

answered Aug 23, 2018 at 1:05

kenS

3941 silver badge12 bronze badges

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

1 Comment

KWallace Over a year ago

Perfect. There was another answer almost identical, that suggesting letting the background on the hover cells go transparent, thus revealing the hover color. I think I like yours a bit more, as it doesn't involve a "trick". It just sets the color, instead of doing something to reveal a color.

Phil · Accepted Answer · 2018-08-23 01:11:46Z

1

The problem is, you're only targeting the <tr> with CSS but the GREEN background is on the <td>.

Add this to your CSS

#CrewMemberTable tr:hover td {
  background-color: transparent !important;
}

Demo

#CrewMemberTable tr:hover {
  background-color: RED !important;
}

#CrewMemberTable tr:hover td {
  background-color: transparent !important;
}

<div id="CrewMemberPanel">
  <table id="CrewMemberTable">
    <tr>
      <td>this text</td>
      <td>some text</td>
      <td style="background-color: GREEN">more text</td>
    </tr>
  </table>
</div>

edited Aug 23, 2018 at 1:11

answered Aug 23, 2018 at 1:05

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

How to make CSS styles override JavaScript applied styles

2 Answers 2

1 Comment

Demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related