更改包含div的div的背景

Question

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

http://jsfiddle.net/VfQAH/

我在表样式布局中有一堆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在这里。

Answer 2

你需要删除空间

.row:hover{
  background: #003366;
}

否则它被解释为

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

的jsfiddle