Skip to main content
se añadieron 1666 caracteres en el cuerpo
Origen Enlace
skara9
  • 233
  • 1
  • 3

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 -->

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>

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 -->

Origen Enlace
skara9
  • 233
  • 1
  • 3

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>