заявление if или case в css - PullRequest
Новая
       38

заявление if или case в css

0 голосов
/ 07 июня 2018

Мне нужна помощь в написании или выяснении, можно ли написать оператор if или case в css для функции наведения.Подсказка предназначена для раскрывающегося списка, в котором отображаются ссылки с именами родительских классов общего класса.

Основная логика заключается в том, что, если функция наведения одного класса активирована / включена, деактивируйте / выключите другую функцию наведения в пределах, которые совместно используют родительский класс.

, на мой взгляд, псевдокод выглядит так: 

if (.drop: hover .last) /*when the cursor hovers, do below*/ then 

.drop: hover .last{display:block;} 

.drop:hover .first{display: none;} 

.drop:hover .second{display: none;} 

.drop:hover .third{display: none;}  
etc... 

 elseif (.drop:hover .first) then 

.drop:hover .first{display: block;} 

.drop:hover .last{display: none;} 

.drop:hover .second{display: none;}

 .drop:hover .third{display: none;} 

endif

1 Ответ

0 голосов
/ 07 июня 2018

Если я понимаю, что вы имеете в виду, вам нужно использовать :not, чтобы игнорировать li:hover.Примечание: используйте непрозрачность вместо display: none, потому что второй перемещает li влево и теряет :hover.

Посмотрите код ниже:

HTML 

<ul>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
</ul>

CSS 

ul {
  display: inline-block; 
}

ul > li {
  display: inline-block;
  padding: 5px 15px;
}
ul:hover > li:not(:hover) {
  opacity: 0;
}

более полная функциональность: https://codepen.io/ralfting/pen/qKqBvM

...