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

Question

[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;
        }

Но она срабатывает даже когда навожу на отступы между картинками. Как это исправить?

Answer 1

[Андрей Федоров]

.us__img:not(:hover) {opacity: .5;}
или

.us__img-wrap:hover .us__img:not(:hover) {opacity: .5;}

Comments

[Novamoscow]

.us__img:hover .us__img:not(:hover) {opacity: .5;}
.us__img:hover {opacity: 1;}
Не работает так как нужно.

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

[Novamoscow]

у меня минус в том, что слайдер растягивает все элементы и получается пробелов между ними нет (так как каждая картинка в пустом диве который на всю ширину растягивается)

[Егор Живагин]

Novamoscow: если не нужно растягивание - variableWidth: true,

[Андрей Федоров]

Novamoscow: Все работает codepen.io/aliencash/pen/vxdNBM либо вы плохо объяснили как вам нужно чтобы это работало.

[Novamoscow]

Егор Живагин: alexandrbm5.ru вот залил прям на сайт. Там блок "О нас" в нем слайдер с картинками

[Novamoscow]

Андрей Федоров: когда между картинками наводишь мышку, прозрачность появляется, нужно чтобы этого не было. Вот тут сделали jsfiddle.net/cdjdvfjh/2 но как реализовать у себя не знаю

Answer 2

[Егор Живагин]

Вашу проблему я решил, но вылезла совсем другая и очень старая - пример

И всё таки лучше через JS

Answer 3

[teotlu]

На основе вашего примера, доработал стили немного.
https://jsfiddle.net/pndg1582/

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

Comments

[Novamoscow]

Все написал. Если отключить слайдер все работает. Как только включаю скрипт слайдера то серый фон становится сверху alexandrbm5.ru

[teotlu]

Novamoscow: да, это потому, что свойство transform (через которое слайдер позиционирует слайды) создаёт новый контекст наложения. В таком случае лучше действительно сделать с помощью JS.

[teotlu]

https://jsfiddle.net/pndg1582/1/

[Novamoscow]

teotlu: блин, думал сделаю через js в итоге сейчас попробовал, не сработало (

[Novamoscow]

teotlu: при наведении класс не добавляется

[Novamoscow]

teotlu: Все заработало, после того, как я скрипт перенес в начало файла, не понял почему он не работает в конце файла js оО