Question

我正在尝试在Joomla CSS中创建一个仅限CSS的响应式导航栏，到目前为止，导航栏适用于大屏幕和小屏幕缩放。但是，当将鼠标悬停在生成的菜单图标上时，我无法显示菜单中的所有其他列表元素。通过操作＆gt;，〜和+选择器，我已经玩了两个小时，但它似乎不起作用。

重申/简化，我希望将其他li元素悬停在显示的图标上时显示在小屏幕版本中。这可以作为纯CSS解决方案吗？

目前的实施情况见下文。

网站：http://2017.grooverjazz.nl/

HTML加价：

<header>
     <jdoc:include type="modules" name="navigationbar" style="xhtml" />
     <a href="#" class="collapseicon">&#9776;</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;
  }
}

Answer 1

还没有以前的兄弟选择器，所以你必须改变图标和模块表的顺序：

<header>
  <a href="#" class="collapseicon">☰</a>
  <div class="moduletable">
    <ul class="nav menu">
      <!-- ... -->
    </ul>
  </div> 
</header>

然后在图标悬停时选择隐藏的<li>元素，如下所示：

.collapseicon:hover + .moduletable li {
  display: block;
}

作为相邻兄弟（+）的替代方案，您还可以使用普通兄弟（~）选择器。

使列表元素出现在兄弟悬停上

1 个答案: