HTML:
<div class="container">
<div class="parent">one
<div class="child">two</div>
</div>
</div>
CSS:
.parent {
background: red;
height: 200px;
width: 200px;
}
.child {
background: green;
height: 100px;
width: 100px;
margin-top: 50px;
margin-left: 50px;
}
/* Instead of applying individual styles */
/* .parent:hover {
background: blue;
}
.child:hover {
background: black;
}
*/
I am trying to change the background colours of both the parent and child elements when hovering over the parent. The issue is that both parent and child have the same property (background) but need different background colours. How can I achieve this simultaneously?