How To Make Css Styles Override Javascript Applied Styles

I create an HTML table dynamically, and apply some styles: var tbl = document.createElement('table'); tbl.id = 'CrewMemberTable'; document.getElementById('CrewMemberPanel').appen

Solution 1:

You will need a selector with greater specificity, such as

#CrewMemberTabletr:hover, #CrewMemberTabletr:hovertd {
    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";

#CrewMemberTabletr:hover, #CrewMemberTabletr:hovertd {
        background-color: RED !important;
    }

<divid="CrewMemberPanel"></div>

Solution 2:

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

Add this to your CSS

#CrewMemberTabletr:hovertd {
  background-color: transparent !important;
}

Demo

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

#CrewMemberTabletr:hovertd {
  background-color: transparent !important;
}

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