javascript - css 中的 if 或 case 语句

Question

我需要一些帮助来编写或找出是否可以在 css 中为悬停功能编写 if 或 case 语句。悬停用于显示具有共享类父名称的链接的下拉列表。

基本逻辑是，如果一个类的悬停功能被激活/打开，则停用/关闭共享父类中的另一个悬停功能。

在我看来伪代码是这样的:

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

Answer 1

如果我明白你的意思，你需要使用 :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