Change background color of row when hovering

Question

I am trying to change the background color of a row when you hover over the row (using a UserStyles script)

I took a screenshot of the page and found the hex color code was #F3F6FC

Here is the page I am trying to modify

From a previous SO post, i tried to do

tr:hover {
    background-color: #000;
}

tr:hover td {
    background-color: transparent; /* or #000 */
}

But this did not work. Any help would be appreciated.

Also, how am I supposed use Chrome Dev Tools to inspect the element when I hover over the table if I cannot both use the inspect tool and hover at the same time?

@Maxime: In my post i have a link to it.. "Here is a page I am trying to modify. — Bijan, Sep 07 '15 at 01:13

sjm · Accepted Answer · 2015-09-07T00:53:41.707

4

You can use the Inspect tool while setting the hover state, using the Filter Pin dropdown in the Styles tab of Chrome Dev tools and the element you were look at is:

.Desktop .ysf-rosterswapper:not(.swapping) tbody tr:hover, .Desktop .ysf-rosterswapper:not(.swapping) tbody tr:focus{
  background: rgba(230, 237, 248, 0.5);
  outline: none;
}

edited Sep 07 '15 at 00:53

answered Sep 07 '15 at 00:43

sjm

5,378
1
26
37

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

Your hover looks okay to me, but I included a working example anyway. The hover rule is listed in the element inspector. To see the hover rule in Chrome's inspector, you may need to expand some properties. Here's a screenshot to help you out:

credit to: See :hover state in Chrome Developer Tools

Example CSS/HTML

td {
  color: white;
}
tr {
  background-color: blue;
}
tr:hover {
  background-color: white;
}
tr:hover td {
  color: blue;
}

<table>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
</table>

Change background color of row when hovering

2 Answers2

Example CSS/HTML