How can I get the color of a selected row to exactly match the hover color?

davechez

Link to test case:
https://live.datatables.net/muloboda/1/edit

Description of problem:
As you can see when you set the select color to the same as the hover color there is a slight difference. It appears there is something altering the opacity and I can't figure out what it is. I also included two other methods I tried in the commented css that I got from this forum that also didn't work. Is it possible to get the select and hover color to match exactly?

allan

I think it is this part of the SCSS that is causing that:

    // Hovering
    &#{$hoverSel} > tbody {
        > tr:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), $hoverShade);
        }

        > tr.selected:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(rgb($table-row-selected), $hoverShade + 0.9);
            box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), $hoverShade + 0.9);
        }
    }

Try:

table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1);
}

https://live.datatables.net/muloboda/2/edit

I've also set a few other relevant CSS variables there.

Do you just not want a hover effect on the selected rows, is that the goal?

Allan

davechez

That worked. Thank you so much, Allan.