javascript - 更改包含 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 descend 的悬停元素，而不是 .row 本身。

jsFiddle here.