Проблемы с выбором селектора CSS

Question

У меня есть то, что я считаю проблемой селектора, но не совсем уверен.

В изображении карусели я хочу, чтобы метки .nav имели непрозрачность 0,5 , когда был виден класс .slide. Но странно это работает только для последнего слайда в карусели, входящих в комплекте codepen, которые будут скользить 4.

Сначала я подумал, что это проблема наслоения, так как последний слайд приходит последние в DOM и как-то повлияло на это. Поэтому я попытался выполнить se, если бы смог исправить это с помощью z-index, но не смог его обработать.

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

Единственное, что я могу сейчас думать, это неправильно, это селектор в строке 64-65. но я не уверен, я думаю, что я пробовал почти все.

Sass Вырез:

.slide 
    display: block 
    opacity: 0 
    position: absolute 
    top: 0 
    width: 960px 
    height: 420px 
    transform: scale(1.8) rotate(12deg) 
    transition: all 3s ease-in-out 

    &:hover + .nav label 
    opacity: 0.5 

.nav label 
    position: absolute 
    top: 0 
    display: none 
    font-family: 'Varela Round' 
    font-size: 250px 
    line-height: 380px 
    color: #ffffff 
    width: 100px 
    height: 100% 
    text-align: center 
    opacity: 0 
    z-index: 9 
    text-shadow: 0px 0px 15px rgb(119, 119, 119) 
    background-color: rgba(255, 255, 255, 0.3) 

    &:hover 
    opacity: 1 

себе в codepen для всего кода

Answer 1

add z-index = 3 здесь input: checked + .slide-container .slide должен исправить проблему.

Причина в том, что ваш другой .slide имеет тот же уровень с текущим, поэтому, когда вы наводите текущий слайд, он вместо этого наводит последний слайд.

Answer 2

Я пытался дурачиться с вашим кодом в codepen, и я получил результаты, которые вы хотели фиксируя ваш CSS под класс .nav label.

Изменение display: none в display: block

Simple.

Я не могу сказать, почему это фиксирует, или почему ваш код не работает заранее, хотя ... это, кажется, что-то делать с input :checked псевдо-класс применяется к четвертому изображению в вашем классе .nav label и игнорирование других изображений.

Для получения дополнительной информации о поведении input:checked и его использованиях с помощью селекторов, переключателей и вкладок флажков выберите https://css-tricks.com/almanac/selectors/c/checked/.