Работает ли множественный селектор с: hover?

Question

0

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

.header-slider .content:hover .left-arrow, .right-arrow
{
    opacity: 1;
}

Nit 15 май 2014, в 00:12

2

Проверьте это с помощью jsfiddle , и вы увидите ...
Nicholas V. 14 май 2014, в 21:33
0

я знаю, что это не работает но должен быть способ сделать это так, я знаю, что я могу сделать таким образом ".header-slider .content: hover .left-arrow, .header-slider .content: hover .right-arrow" но я не хочу делать на этом пути
user3599641 14 май 2014, в 21:38

Теги:

3 ответа

0

Я думаю, что вы хотите

.header-slider .content:hover .left-arrow, .header-slider .content:hover .right-arrow {
    opacity: 1;
}

Ваш исходный код эквивалентен

.header-slider .content:hover .left-arrow {
    opacity: 1;
}

.right-arrow {
     opacity: 1;
}

Который я не думаю, что вы хотите.

Если вы найдете это слишком подробным, проверьте css препроцессор sass, который позволяет вам писать:

.header-slider .content:hover {
    .left-arrow, .right-arrow {
        opacity: 1;
    }
}

Cameron Martin 14 май 2014, в 19:41

0

.header-slider .content: hover .left-arrow, .header-slider .content: hover .right-arrow {opacity: 1; } нет другого способа написать этот код?
user3599641 14 май 2014, в 21:41
0

@Jasiu Нет, если вы не используете препроцессор, такой как SASS ( sass-lang.com ).
Serlite 14 май 2014, в 21:42

0

Вам нужен лучший селектор:

.header-slider .content:hover .left-arrow, .header-slider .content:hover .right-arrow {
    opacity: 1;
}

Если вам не нравится этот способ, вы можете добавить общий класс для стрелок, например .arrow, и просто выполните:

.header-slider .content:hover .arrow {
    opacity: 1;
}

Конечно, для этого потребуются некоторые изменения HTML, а не только в CSS.

Shomz 14 май 2014, в 19:37

Проверьте это с помощью jsfiddle , и вы увидите ...
я знаю, что это не работает но должен быть способ сделать это так, я знаю, что я могу сделать таким образом ".header-slider .content: hover .left-arrow, .header-slider .content: hover .right-arrow" но я не хочу делать на этом пути
.header-slider .content: hover .left-arrow, .header-slider .content: hover .right-arrow {opacity: 1; } нет другого способа написать этот код?
@Jasiu Нет, если вы не используете препроцессор, такой как SASS ( sass-lang.com ).

Nit · Accepted Answer · 2014-05-14T20-13-00.000Z

Вы можете использовать следующее, но на самом деле лучше просто написать длинный селектор.

.header-slider .content:hover [class$="-arrow"]

Если вы хотите набрать меньше использовать Sass или что-то подобное.