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

if或case case in css

1 个答案: