I'm trying to create a link that changes its background color when hovered over, but the issue is there are two child divs inside this parent div. When I move the mouse within the boundaries of the parent div, it's actually on a child div. This means one child div changes on hover, but the other does not.
Is there a way to make both child divs change when hovering over one using CSS?
If necessary, I am open to switching to tables for an easier solution, but the goal is to find a way to make the entire div or row change when hovering over one child or cell.
I'm aiming to create something similar to the YouTube recommended videos boxes on the right side 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>
This code is similar to what I have been working with, constantly tweaking and modifying to achieve the desired result.