Question

我确信答案很简单，但我无法弄明白：

我有一堆表格式布局的div，如下所示：

<div class="row">
    <div class="col boxname">Box Name</div>
    <div class="col length">Length</div>
    <div class="col width">Width</div>
    <div class="col height">Height</div>
</div>
<div class="row">
    <div class="col boxname">A</div>
    <div class="col length">1</div>
    <div class="col width">2</div>
    <div class="col height">3</div>
</div>
<div class="row">
    <div class="col boxname">B</div>
    <div class="col length">1</div>
    <div class="col width">2</div>
    <div class="col height">3</div>
</div>

我希望行在悬停时改变颜色，因为我有：

.row :hover{
    background: #003366;
}

但背景仅在悬停的细胞上改变，而不是整行。我是否必须使用JS来实现它，或者是否有一个我不知道的简单CSS技巧？

Answer 1

您使用.row:hover代替.row :hover来突出显示整行。

.row:hover{
    background: #003366;
}

您的原始选择器.row hover会从.row中选择下降的所有悬停元素，而不是.row本身。

jsFiddle here.

Answer 2

您需要删除空格

.row:hover{
  background: #003366;
}

否则将其解释为

.row *:hover{
  background: #003366;
}

jsFiddle

更改包含div的div的背景

2 个答案: