Saroj Thapa Saroj Thapa - 2 months ago 10
CSS Question

Hover table rows but still keep background color of some cells

Some cells on my table have background colors. The table's row colors are alternating. I created a hover in table row. When the mouse is over a row, it hovers and all the background colors of some colorful cells are invisible. How can I hover but still keep the background colors of cells when the mouse pointer is over the row. My codes for hover and alternate colors:

CSS:

tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
background-color: #EBEBEB ;
}


JQuery:

$(document).ready(function()
{
$("tr:odd").css("background-color", "#dfe7f2");
});

Answer

You can do this in plain css.

tr:nth-child(odd) {
    background-color: #EBEBEB;
}
Comments