let [frontBlock, backBlock] = [
document.querySelector('.frontBlock'), document.querySelector('.backBlock'), 0
]
frontBlock.addEventListener('mouseover', (e) => {
if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div') && e) {
e.target.closest('div').style.display = 'none';
backBlock.style.display = 'block';
}
})
backBlock.addEventListener('mouseout', (e) => {
if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div')) {
e.target.closest('div').style.display = 'none';
frontBlock.style.display = 'block';
}
})
.container {
margin: 50px;
}
.container>* {
border: 2px solid black;
min-height: 100px;
overflow-y: auto;
}
.container h2 {
text-align: center;
}
.container p {
padding: 0px 20px;
}
.backBlock {
display: none;
min-height: 200px;
}
<div class="container">
<div class="frontBlock">
<h2>Лицевой блок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe repudiandae doloremque laborum quae a cum minus eos delectus repellendus, debitis ad possimus nam fugit amet ea, accusantium qui iste animi perspiciatis. Deleniti beatae ut distinctio
nulla quae asperiores, praesentium sed, consequuntur illo totam aperiam cumque iusto reiciendis, ullam, tenetur delectus.</p>
</div>
<div class="backBlock">
<h2>Обратный блок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam porro id eligendi unde, dolorum repellendus inventore doloremque animi exercitationem saepe ipsum nulla, minus accusamus quae nisi reprehenderit ullam eos eaque, voluptas, sit ea perspiciatis.
Labore accusantium doloremque facilis qui placeat aperiam perferendis numquam sequi recusandae vel debitis quos, inventore iure id dignissimos neque nihil ut omnis, temporibus, aliquid quasi dolor quae dolorem. Cupiditate totam animi fuga repellat
quasi et accusamus, impedit consequuntur perferendis repudiandae. Dignissimos facilis, sunt hic est maiores veniam sed voluptate ipsam voluptatum. Minima assumenda eveniet fuga pariatur. Cupiditate possimus incidunt reprehenderit explicabo laboriosam,
voluptate nesciunt sapiente enim.</p>
</div>
</div>