Cuando el mouse toca un casillo, estás enlargando el casillo a ocupar todo del contenedor. El problema con este es que cuando mueves los casillos, los posiciónes de los casillos se cambian y el mouse toca otro casillo. Este causa otros casillos a tener el estado de hover
y todo sucede una y otra vez.
Creo que el mejor solución cuando necesitas eventos en los elementos hijos a burbuejar hasta los padres sería usar oyentes de eventos en javascript.
const sktHero = document.querySelector('.skt-hero');
sktHero.addEventListener('mouseover', e => sktHero.style.backgroundImage = e.target.getAttribute('data-backgroundImg'));
sktHero.addEventListener('mouseleave', () => sktHero.style.backgroundImage = '');
y para cada div use data-backgroundImg
en vez de style
<div class="columnas" data-backgroundImg="url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">hola</div>
Ejemplo:
const sktHero = document.querySelector('.skt-hero');
sktHero.addEventListener('mouseover', e => sktHero.style.backgroundImage = e.target.getAttribute('data-backgroundImg'));
sktHero.addEventListener('mouseleave', () => sktHero.style.backgroundImage = '');
.skt-hero {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
background-size: cover;
}
.columnas {
width: 25%;
border: 1px solid gray;
background-color: transparent;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas" data-backgroundImg="url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">hola</div>
<div class="columnas" data-backgroundImg="url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">hola</div>
<div class="columnas" data-backgroundImg="url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >hola</div>
<div class="columnas" data-backgroundImg="url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">hola</div>
</div> <!-- Fin del contenedor -->