Hola pregunta, esque no entiendo porque cuando hago hover sobre un item todos cambian su opacidad (incluyendo el iteam al que le estoy ha...

Daniel Cortés Álvarez

Pregunta

student•hace 4 años

Hola pregunta, esque no entiendo porque cuando hago hover sobre un item todos cambian su opacidad (incluyendo el iteam al que le estoy haciendo hover, lo cual no debería pasar).Acá dejo mi código, al que me pueda ayudarle agradesco.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi video</title>
</head>
<style>
    body
    {
        margin:0px;
    }
    .carousel
    {
        width:100%;
        overflow: scroll;
        padding: 30px;
        position:relative;
    }
    .carousel__container
    {
        white-space: nowrap;
        margin:70px 0px;
        padding-bottom: 10px;
    }
    .carousel__item
    {
        width:200px;
        height:250px;
        border-radius: 20px;
        background-color: blueviolet;
        overflow: hidden;
        margin: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
    }
    .carousel__item:hover ~ .carousel__item
    {
        transform: translate3d(100px,0,0);
    }
    .carousel__container:hover .carousel__item
    {
        opacity: 0.3;
    }
    .carousel__container:hover .carousel__item:hover
    {
        transform: scale(1.5);
    }
</style>
<body>  
    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel__item">

            </div>
            <div class="carousel__item">

            </div>
        </div>
    </section>
    
</body>
</html>```

Daniel Cortés Álvarez

student•hace 4 años

Si, lo logré cambiando estas dos líneas de código. Aunque todavía no entiendo muy bien la sintaxis así que averiguaré un poco más sobre eso. Muchas gracias

.carousel__container:hover .carousel__item:hover
    {
        opacity: 1;
        transform: scale(1.5);
    }
    .carousel__container:hover .carousel__item
    {
        opacity: 0.3;
    }```

Diego Iván Centeno

student•hace 4 años

Hola:wave: Se puede arreglar agregando opacity: 1; Ejemplo:

.carousel__container:hover .carousel__item:hover
    {
        opacity: 1;
        transform: scale(1.5);
    }

Con esa línea ya te da el resultado esperado, todo lo demás está bien:smiley:. Saludos:v:

Leonardo de los angeles Espinoza Hernandez

student•hace 4 años

Error mío Daniel! Leí mal la pregunta, una disculpa

Entonces solo agrega un opacity de 1 a tus ultimas clases y ignora mi comentario anterior.

 .carrousel__container:hover .carrousel-item:hover {
        transform: scale(1.5);
        opacity: 1;
    }

Saludos!

Daniel Cortés Álvarez

student•hace 4 años

jaja ya lo había intentado. Pero lo que hace es que el único que se opaca es el que estas seleccionando, cosa que debería ser al revés.

Leonardo de los angeles Espinoza Hernandez

student•hace 4 años

Hola @danielcortésálvarez

el problema es con esta clase

    .carousel__container:hover.carousel__item
    {
        opacity: 0.3;
    }

Estas haciendo que cada que hagas hover sobre el container todo la opacidad se reduzca, solo cambia la clase de

.carousel__container

por

.carousel__item

y debería funcionar correctamente

    .carousel__item:hover
    {
        opacity: 0.3;
    }

De esa forma debería quedar.

Saludos!

Hola pregunta, esque no entiendo porque cuando hago hover sobre un item todos cambian su opacidad (incluyendo el iteam al que le estoy ha...

Curso de Frontend Developer

Curso de Frontend Developer