当鼠标悬停时更改行的背景颜色

Question

我正在尝试使用UserStyles脚本在鼠标悬停在行上时更改行的背景颜色。

我对页面进行了截图，并发现十六进制颜色代码为#F3F6FC。

这里是我想要修改的页面。

根据以前的SO帖子，我尝试执行以下操作：

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

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

但是这并没有起作用，希望能得到帮助。

另外，如果我无法同时使用检查工具和悬停在表格上，我该如何使用Chrome Dev Tools来检查元素？

- Bijan

---

你应该展示你正在工作的页面。 - Maxime

@Maxime：在我的帖子中我有一个链接.. "这是我正在尝试修改的页面。 - Bijan

Answer 1

您可以使用检查工具来设置悬停状态，在Chrome Dev 工具中的样式选项卡中使用筛选针下拉菜单，您要查看的元素是：

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

- sjm

Answer 2

你的hover看起来还不错，但我还是提供了一个可工作的例子。hover规则在元素检查器中列出。要在Chrome的检查器中查看hover规则，你可能需要展开一些属性。下面是一张截图以帮助你：

credit to: 查看Chrome开发者工具中的:hover状态

HTML/CSS示例

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>

- ThisClark