我正在尝试在 Joomla CSS 中创建一个纯 CSS 响应式导航栏,到目前为止,该导航栏适用于大屏幕,适用于小屏幕。但是,当鼠标悬停在生成的菜单图标上时,我无法让菜单中的所有其他列表元素出现。我已经玩了两个小时来操纵 >、~ 和 + 选择器,但它似乎不起作用。
重申/简化,我希望其他 li 元素在悬停在显示的图标上时出现在小屏幕版本中。这可能作为纯 CSS 解决方案吗?
当前的实现如下。
网站:http://2017.grooverjazz.nl/
HTML 标记:
<header>
<jdoc:include type="modules" name="navigationbar" style="xhtml" />
<a href="#" class="collapseicon">☰</a>
</header>
当前导航栏CSS:
header {
background: #12171d;
border-bottom: 1px solid #333333;
opacity: 0.9;
position: fixed;
text-align: center;
font-size: 150%;
width: 100%;
top: 0;
z-index: 999;
}
header a:hover {
color: #da8203;
text-decoration: none;
}
header ul {
list-style: none;
margin: 0;
padding: 0 8vw;
}
header li:first-child {
float: left;
font-weight: 700;
}
header li:not(:first-child) {
display: none;
}
header li a {
border-bottom: 3px solid transparent;
color: #cccccc;
padding: .7em .7em;
margin-bottom: -1px;
}
.collapseicon {
padding: 0 9vw 0 0;
float: right;
}
.collapseicon:hover > header li {
display: inline!important;
}
@media (min-width: 950px) {
header li a:hover {
border-color: #da8203;
}
header li {
display: inline!important;
}
header li a {
display: inline-block;
}
header li:last-child {
float: right;
}
.collapseicon {
display: none;
}
}
最佳答案
还没有一个previous sibling selector,所以你必须改变icon和moduletable的顺序:
<header>
<a href="#" class="collapseicon">☰</a>
<div class="moduletable">
<ul class="nav menu">
<!-- ... -->
</ul>
</div>
</header>
然后选择隐藏的<li>
像这样悬停在图标上的元素:
.collapseicon:hover + .moduletable li {
display: block;
}
作为相邻兄弟 (+
) 的替代方案,您还可以使用通用兄弟 (~
) 选择器。
关于html - 使列表元素出现在同级悬停上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42177040/