如何使用CSS中的if或case语句?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (345)

我想要一些帮助写或发现是否可以在css中为悬停函数编写if或case语句,悬停用于显示与共享类父名称的链接的下拉列表。

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

在我看来,psuedocode是这样的:

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
提问于
用户回答回答于

你需要用:not忽略li:hover

注意:用opacity代替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/ralvision/PEN/qKqBvM

扫码关注云+社区

领取腾讯云代金券