Reduce bounds of expanded area for hover - html

Question

Consider this contrived example. I have two divs, one of which grows to twice the size when you hover over it. When you move your mouse out of the edge of the expanded box, it returns to normal size.
Notably, it only returns to normal size once your mouse leaves the bounds of the expanded box. What I would like is for the box to go back to its normal size when your mouse leaves the bounds of the original size of the box.
I've been doing some reading of other questions and I think maybe pseudo elements are the way forward, but I can't figure it out. There are examples of maintaining the bounding box size when the element shrinks, but not when it expands.
.left {
width:300px; float:left;
}
.right {
width:300px; float:right; background-color: red;
}
.right:hover {
transform: scale(2);
}
<br>
</br>
<div style="width:800px">
<div class="left">foo</div>
<div class="right">bar</div>
</div>

Answer 1

Add pointer-events: none; to the div you want to transform. Apply the :hover effect to a parent div wrapping the transforming div. Example:
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 100px;
background: tomato;
pointer-events: none;
}
.parentBox:hover .box {
transform: scale(2);
}
<div class="parentBox">
<div class="box"></div>
</div>
You can also make the box react to events by putting the event handlers on the box's parent, example on click:
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 100px;
background: tomato;
pointer-events: none;
}
.parentBox:hover .box {
transform: scale(2);
}
<div class="parentBox" onclick="alert('You clicked the box!');">
<div class="box"></div>
</div>