在悬停时更改一行 Div 的背景颜色

Question

我正在尝试更改悬停时一行 Div 的背景颜色，但我不知道该怎么做。

// row 1
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

// row 2
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
// row 3
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

如何将鼠标悬停在一行上并通过更改背景颜色来突出显示该行 Div？ （我的 Div 位于 css 网格内）。

感谢您的帮助。

Answer 1

您可以在 css 文件中为所有 div 设置悬停时的背景颜色：

.div {
  background-color: lightgray;
}

.div:hover {
  background-color: yellow;
}

现在 div 悬停时将变成黄色。

如果你想让它具体到每一行。您可以将一行包装在另一个 div 中并为其指定一个 id。然后在 css 中引用 ID 以获取特定样式。

您的 HTML：

// row 1
<div id="first-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

你的CSS：

#first-row {
  background-color: lightgray;
}
#first-row:hover {
  background-color: yellow;
}

Answer 2

您应该为 div 使用悬停伪样式，例如

div:hover { background-color: #0000ff; }

如果您需要区分行，请使用行类或特定内容扩展您的类样式

.row-1 div:hover { background-color: #0000ff; }
.row-2 div:hover { background-color: #00ff00; }
.row-3 div:hover {  background-color: #ff0000; }

Answer 3

这个div：

.element {
    background-color: #fe0101;
}

鼠标悬停时的 div：

.element:hover {
    background-color: #000000;
}