Question

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

Answer 1

I think you might just need to fix a line of your CSS. Change:

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

to:

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

That seemed to work for me.