Можно ли изменить класс при наведении указателя мыши на определенных дочерних элементов из <ul>

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

.lis:nth-child(10):hover .section { opacity: 1;}

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

.lis:nth-child(10):hover .section ~~~ .text0 { opacity: 1;}

Но это не работает, здесь - это ссылка на код, над которым я сейчас работаю.

я не думаю, что ~~~ работает, что вы пытаетесь сделать с помощью ~~~?

Chris Li 13.09.2018 18:22

получить доступ к тексту за пределами div за пределами li за пределами ul

esteban 13.09.2018 18:33

Я думаю, вы могли неправильно понять ~, ~ - это общий селектор братьев и сестер, он выбирает только братьев и сестер, следующих за элементом. к сожалению, в css нет возможности подняться "вверх"

Chris Li 13.09.2018 18:35

К сожалению, это невозможно только с помощью CSS, поскольку модель рендеринга CSS работает сверху вниз (то есть вы не можете создавать резервную копию DOM, а только более конкретную, углубляясь). Однако вы можете сделать это с помощью JavaScript.

War10ck 13.09.2018 18:42

для обращения к другим пользователям в будущем существует обходной путь, если вы используете jquery, который будет выглядеть так: codepen.io/sopranopillow/pen/EeReKx

esteban 14.09.2018 00:37
0
5
45
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Невозможно настроить таргетинг на внешние элементы div с помощью CSS, потому что они даже не являются частью вашего <ul>. Технически вы могли бы сделать это, если бы ваш текст находился внутри каждого <li> с некоторым абсолютным позиционированием, чтобы получить их все, где вы хотите. Затем ваши преобразования могут быть выполнены в div внутри для срезов.

Это позволит вам создавать стили наведения на <li>.

Вы не можете сложить селектор ~ для перемещения вверх по DOM. Единственный способ сделать то, что вы хотите с текущей разметкой, - это использовать Javascript.

Что ты курила? Я тоже хочу этого!

connexo 13.09.2018 19:03

ха-ха Вау. Это то, что я получаю, отвечая на вопросы на встрече! Я не отмечал эти теги как код, и это нарушало весь ответ. Я починил это.

brianespinosa 13.09.2018 19:41

спасибо, я нашел работу с jquery

esteban 14.09.2018 00:38

Другие вопросы по теме