1

El código hace que: cuando hagas hover en cada div de clase ".columnas" la imagen de fondo de su div padre cambiara. ----El problema es: Cuando haces hover de izquierda a derecha todo correcto; pero cuando lo haces al revés, es como si las ".columnas" se hubieran desplazado hacia la izquierda. ¿ Como hacer para que hover también funcione de derecha => izquierda?

NOTA1: al ejecutar, esperen un poco para que las imagenes carguen, tome cualquier imagen :).

NOTA2: en el código aparece "--backgroundImg" es una variable css para cada ".columna" en su estilo en linea, de tal forma que cuando sucede hover se pondrá su respectivo valor.

.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;
}
.skt-hero:hover{
    background-image: none;
}
.columnas {
    width: 25%;
    border: 1px solid gray;
    background-color: transparent;
}
.columnas:hover {
    width: 100%;
    height: 100%;
    background-image: var(--backgroundImg);
    position: absolute;
    z-index: -1;
    background-size: cover;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">hola</div>
<div class="columnas" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">hola</div>
<div class="columnas" style="--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" style="--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 -->

NOTA3: Seria bueno que sea puro CSS; pero si no hay opción, la forma javascrip también será genial.

2 respuestas 2

2

Pensé que la propiedad Z-index era simple; pero depende del anidamiento y otras cosas; tarde en entenderlo. La razón porque position:absolute; se comportaba así, es que al ser absoluto sale del flujo normal, y se ubica en el origen de su contenedor, sobrando 3 "columnan" con display flex que se ubican en el origen del contenedor, ya que solo quedan 3 respetando el flujo. bueno, Aquí dejo la la solución con Css puro para quien quiera verlo.

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    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;
}
.skt-hero:hover{
    z-index:-3;
    background-image:;
    position:;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
}
.z1{} /*no hace falta*/
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

La solución concite en sacar del flujo todos las ".columnas" y posicionarlo con left, 0%,25%,50%,75% y luego en el hover hacer que vuelvan a left:0%;

1

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

1
  • Gracias! por resolverlo, estoy mejorando en javascript y desconocia"data" en data-backgroundImg, así que tuve que hacerlo por css. Gran aporte, marcare como respuesta tu pregunta............
    – kraud
    Commented el 29 nov. 2021 a las 23:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.