更改包含div的div的背景

Question

I'm sure the answer is really simple, but I can't figure this out :

http://jsfiddle.net/VfQAH/

I have a bunch of divs in a table style layout like so :

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

I want rows to change color on hover, for that I have :

.row :hover{
    background: #003366;
}

But the background changes only on the hovered cell, instead of the whole row. Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?

Answer 1

You'd use .row:hover instead of .row :hover to highlight the whole row.

.row:hover{
    background: #003366;
}

Your original selector, .row hover , selects all hovered elements which descend from .row , instead of .row itself.

jsFiddle here.

Answer 2

You need to remove the space

.row:hover{
  background: #003366;
}

Otherwise it is interpreted as

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

jsFiddle