css中的if或case语句
css中的if或case语句
提问于 2018-06-08 03:04:38
我需要一些帮助来编写或者找出是否有可能在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回答 1
Stack Overflow用户
发布于 2018-06-08 03:25:28
如果我理解你的意思，你需要使用: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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50748530
复制相关文章
相似问题