Я пытаюсь изменить свои изображения после того, как они были наведены, но по какой-то причине, когда я наводил курсор на одно, другое меняется - PullRequest
Новая
       59

Я пытаюсь изменить свои изображения после того, как они были наведены, но по какой-то причине, когда я наводил курсор на одно, другое меняется

0 голосов
/ 11 июля 2020

Я пытаюсь реализовать эффект css, когда при наведении курсора мыши на изображение на его месте появляется другое изображение.

Пример этого эффекта: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
</style>
</head>
<body>
    <div class="card">
        <img src="https://lh3.googleusercontent.com/proxy/yPBxt1JeUGqXWcCd9IRpOLIYSKWFLteV_m-ATsbTdYmpWM2iUIc36U6LfRP1tL31iAgC4YrwyUkqGwwJv0Jjy6lHPFC3y0Y" alt="Card Back">
        <img src="https://i.pinimg.com/originals/23/48/8a/23488aa42a19433d34b72a5ee4ae5f14.jpg" class="img-top" alt="Card Front">
    </div>
</body>
</html>

А вот мой собственный код: 

<!DOCTYPE html>
<html>

<head>
    <style>
        .mid-one-container {
            position: relative;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: baseline;
            align-content: center;
            display: inline-block;
        }

        .mid-one-items {
            order: 3;
            flex-basis: 0;

        }

        .mid-one-items img {
            width: 300px;
        }

        .mid-one-items .img-top {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 50;
        }


        .mid-one-items:hover .img-top {
            display: inline;
        }
    </style>

</head>

<body>

    <div class="mid-one-container">
        <div class="mid-one-items">
            <img src="https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/egamzcy0qviwbrbhbfp3/fc-barcelona-2019-20-vapor-match-home-football-shirt-d16q4Q.jpg"
                alt="front">
            <img src="https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5,q_80/dzsv4wxmgirdghtx8nln/fc-barcelona-2019-20-vapor-match-home-football-shirt-d16q4Q.jpg"
                class="img-top" alt="back">

            <img src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/m65penejikj8c00svcmo/stephen-curry-earned-city-edition-swingman-golden-state-warriors-mens-nba-connected-jersey-4Vr7FK.jpg"
                alt="front">
            <img src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/fm4aihaj6diuyf1htuot/stephen-curry-earned-city-edition-swingman-golden-state-warriors-mens-nba-connected-jersey-4Vr7FK.jpg"
                class="img-top" alt="back">
        </div>



    </div>


</body>

Когда я пытаюсь реализовать эту функцию в моем контейнере с гибким боксом, я получаю пару непреднамеренных ошибок:

  1. При наведении курсора над изображением слева (синяя и красная майка) изображение трансформируется в неправильное изображение (т.е. изображение мужчины в желтой майке)

  2. , когда я нахожу на человека в желтой майке он меняет образ человека в сине-красной майке.

Я подозреваю, что это как-то связано с этими двумя стилями: 

.mid-one-items .img-top {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 50;
    }


    .mid-one-items:hover .img-top {
        display: inline;
    }

Мы будем очень благодарны за любую помощь с некоторыми советами по отображению правильного изображения при наведении, а также с сохранением изображений в одной строке.

1 Ответ

0 голосов
/ 11 июля 2020 
mid-one-items .img-top {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;
}

Здесь вы устанавливаете положение для КАЖДОГО элемента класса .img-top, которое должно быть зафиксировано на 0 пикселей слева, это означает, что оба изображения, которые появляются при наведении курсора, располагаются там, золотой государственная футболка находится после барсы, поэтому мы видим только ее, но на самом деле там обе, это просто золотая государственная футболка сверху.

попробуйте прокомментировать position: absolute;, чтобы понять, что я имею в виду, вы увидите оба изображения из класса .img-top, вам нужно их правильно расположить, вот и все.

Вы можете сделать это по-разному, простой, но, вероятно, не лучший способ - сделать разные css классы для каждого изображения, где вы устанавливаете разные значения для левой позиции, прямо сейчас оба изображения будут отображаться при наведении курсора (потому что они одного класса), но если у вас есть другой класс для каждого из них, появится только один каждый раз при наведении курсора на другое изображение.

...