悬停时更改行的背景颜色

Question

当您将鼠标悬停在该行上时，我正在尝试更改行的背景颜色（使用UserStyles脚本）

我截取了该页面的截图，发现十六进制颜色代码为#F3F6FC

Here是我要修改的页面

从之前的SO帖子中，我试图

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

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

但是这没用。任何帮助将不胜感激。

此外，如果我不能同时使用检查工具并将鼠标悬停在桌面上，我应该如何使用Chrome开发工具检查元素？

Answer 1

您可以在设置悬停状态时使用“检查”工具，使用Chrome开发工具的“样式”标签中的“过滤器针脚”下拉菜单，您所看到的元素是：

.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;
}

Answer 2

你的悬停看起来对我很好，但无论如何我都包含了一个工作示例。悬停规则列在元素检查器中。要在Chrome检查器中查看悬停规则，您可能需要展开一些属性。这是一个屏幕截图，可以帮助您：

信用：See :hover state in Chrome Developer Tools

CSS / HTML示例

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;