Actualmente estoy tratando de replicar una función de la página de inicio de Netflix:
Tenemos varias filas de películas. Cuando no pasamos el mouse sobre ninguna película, las imágenes de la película se mantienen normales. Pero cuando pasamos el cursor sobre una película, la imagen actual se amplía y todas las demás en esta fila reducen su opacidad. Cuando "onMouseOut" la fila, todo vuelve a la normalidad
Actualmente me pregunto cómo implementar eso en una función onMouseOver. Si alguien tiene una idea, sería muy útil.
PD: También uso Swiper JS.
Gracias por tu ayuda.
La solución podría ser agregar una clase a ese elemento durante el evento onMouseOver. De esta manera, puede seleccionar fácilmente qué elementos le gustaría estilizar.
También puede agregar un nombre de clase al contenedor para poder seleccionar todos los elementos sin la clase seleccionada o sin pasar el mouse. Por favor, pruebe el siguiente, parece ser el más simple:
.container:hover > .item:not(:hover) { opacity: 0.5; }Por favor, vea el codepen a continuación: