悬停时更改行的背景颜色[关闭]

Posted 2023-02-22

【中文标题】悬停时更改行的背景颜色[关闭]

【英文标题】：Change background color of row when hovering [closed]

【发布时间】：2015-12-02 11:31:38

【问题描述】：

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

我截取了页面，发现十六进制颜色代码是#F3F6FC

Here 是我要修改的页面

从以前的 SO 帖子中，我尝试这样做

tr:hover 
    background-color: #000;


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

但这不起作用。任何帮助将不胜感激。

另外，如果我不能同时使用检查工具和悬停鼠标，当我将鼠标悬停在表格上时，我应该如何使用 Chrome 开发工具检查元素？

【问题讨论】：

你应该显示你正在处理的页面。

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

【参考方案1】：

您可以在设置悬停状态时使用 Inspect 工具，使用 Chrome Dev 工具的 Styles 选项卡中的 Filter Pin 下拉菜单，您查看的元素是：

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

【参考方案2】：

您的悬停对我来说看起来不错，但我还是提供了一个工作示例。悬停规则列在元素检查器中。要在 Chrome 的检查器中查看悬停规则，您可能需要展开一些属性。这是一个可以帮助您的屏幕截图：

感谢：See :hover state in Chrome Developer Tools

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