Can a nested div ignore the hover of a parent - html

Question

If a div is nested inside of another, can the nested div ignore the hover of the parent. Here's an example
.Box {
width: 50px;
height: 50px;
background: red;
}
.Circle {
width: 20px;
height: 20px;
background: blue;
border-radius: 20px;
}
.Box:hover {
animation: expand .5s normal forwards;
}
#keyframes expand {
0% {
transform: scale(1);
}
100% {
transform: scale(1.6);
}
}
<div class="Box">
<div class="Circle"></div>
</div>
In this example would there be a way to make the Box expand but not the Circle

Answer 1

Technically the parent hover event doesn't get applied to the child.
But in your case the child is still effected, because you're scaling the parent. And thus everything inside of the parent is being scaled too.
In order to counter the scaling of the nested div, you can apply a reverse scaling effect when the parent div is hovered.
.Box{
width: 50px;
height: 50px;
background: red;
}
.Circle{
width: 20px;
height: 20px;
background: blue;
border-radius: 20px;
}
.Box:hover{
animation: expand .5s normal forwards;
}
.Box:hover .Circle {
animation: contract .5s normal forwards;
}
#keyframes expand {
0% {
transform: scale(1);
}
100% {
transform: scale(1.6);
}
}
#keyframes contract {
0% {
transform: scale(1);
}
100% {
transform: scale(0.625); /* 1 / 1.6 */
}
}
<div class="Box">
<div class="Circle"></div>
</div>

Answer 2

Because you are scaling the parent, everything inside it will be impacted. An alternative solution is to have a different sibling to the circle and apply the animation on that.
CSS:
.Box {
width: 50px;
height: 50px;
background: red;
}
.Circle {
width: 20px;
height: 20px;
background: blue;
border-radius: 20px;
position: absolute;
top: 10px;
left: 10px;
}
.Container {
position: relative;
}
.Box:hover {
animation: expand .5s normal forwards;
}
#keyframes expand {
0% {
transform: scale(1);
}
100% {
transform: scale(1.6);
}
}
HTML:
<div class="Container">
<div class="Box">
</div>
<div class="Circle"></div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2157/
Here, the circle is positioned so that it's position is not affected by the box