@Novamoscow

Прозрачность остальных элементов при наведении?

Есть такой HTML
<div class="us__slaider-container">
            <div class="us__img-wrap">
                <div class="us__img-slaider">
                    <div>
                        <img src="img/us-img__1.png" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="img/us-img__2.png" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="img/us-img__3.png" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="img/us-img__4.png" alt="" class="us__img">

                    </div>
                    <div>
                        <img src="img/us-img__5.png" alt="" class="us__img">
                    </div>
                </div>
            </div>
        </div>


Тут все просто, кртинки в теге img с классом .us__img (обертки нужны для слайдера слик)
И вот тут встает вопрос, как при наведении на одну картинку, сделать все остальные opacity: 0.5 ?

Нашел вот такую структуру
.us__img {
            opacity: 1;
            margin-left: 15px;
            margin-right: 15px;  (маргины для отступов между картинками)
        }
        .us__img-wrap:hover  .us__img {
            opacity: 0.5;
        }


Но она срабатывает даже когда навожу на отступы между картинками. Как это исправить?
  • Вопрос задан
  • 371 просмотр
Решения вопроса 3
aliencash
@aliencash
Партизан
.us__img:not(:hover) {opacity: .5;}
или
.us__img-wrap:hover .us__img:not(:hover) {opacity: .5;}
Ответ написан
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Вашу проблему я решил, но вылезла совсем другая и очень старая - пример

И всё таки лучше через JS
Ответ написан
Комментировать
teotlu
@teotlu
Навёрстываю упущенное
На основе вашего примера, доработал стили немного.
https://jsfiddle.net/pndg1582/

Если вкратце, суть в том, что под img подкладывается подложка (псевдоэлемент before родительского дива, для которого hover не задан), hover по которой не считается hover-ом по .us__img-wrap (тогда как hover по картинкам по-прежнему считается), поэтому между картинками эффект не срабатывает.
P.S. Серый фон, естественно, просто чтобы суть показать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы