So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.

So i guess my question is, is there a way to make both child divs change when hovering one using css? 

I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.

What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)

Thanks in advance

CSS

```
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}

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

#child1 {
width:120px;
float:left;
}

child2 {
width:188px;
float:right;
}

```

HTML (with some other stuff)

```
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
    <div id="parent">
        <div id="child1">
            <img src="img.jpg">
        </div>
        <div id="child2">
            ${item.getinfo2()} <br>
            ${item.getinfo3()} <br>                      
        </div>
    </div>
</a>
</c:forEach>

```

Code is something like that. Ive been hacking it up for the last while but that was something like what i had before