为什么 :hover 在这个例子中不影响另一个元素？

Question

我正在尝试在移动设备上制作一个带有菜单链接的导航栏，当您点击菜单按钮时会出现该导航栏。所以，我决定使用:hover CSS 事件来让它们出现。

In this example(or this demo,:hover用于让其他元素可见，效果很好。

没有所有其他容器（<nav>，以及#item 和#menu 之外的其他<li> 元素），代码可以正常工作。但是，当我将它实施到我当前的结构中时，它停止工作； ...:hover ~ ... 不起作用，而 ...:hover 仍然有效（因为 ... 是规则名称）。

body {
  font-family: sans-serif;
  margin: 0px;
  width: 100%;
}

nav {
  background-color: black;
  position: fixed;
  width: 100%;
  height: 196px;
  font-size: 64px;
  padding-top: 0px;
  z-index: 5;
}

nav ul {
  color: white;
  -webkit-padding-start: 32px;
  width: calc(100% - 32px);
}

nav ul li {
  display: block;
  float: left;
  height: 18px;
  padding-top: 8px;
}

nav ul li#title {
  min-width: 80%;
  font-weight: bold;
}

nav ul li#menu {
  width: 100px;
  height: 100px;
  color: white;
  display: block;
}

nav ul li#menu:hover {
  color: red !important;
}

nav ul li#menu:hover ~ nav ul li#item {
  color: red !important;
  visibility: visible !important;
}

nav ul li#item.first {
  margin-top: 32px;
}

nav ul li#item {
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: -32px;
  height: 96px;
  padding: 16px;
  color: black;
  display: block;
  width: 100%;
  visibility: hidden;
}

nav ul li#item:hover {
  background-color: rgba(255, 0, 0, 0.5);
  text-decoration: underline;
}

a {
  color: black;
  text-decoration: none;
  width: 100%;
}

a#menu {
  color: white !important;
}

a:hover {
  color: blue;
}

a:visited {
  color: black;
  text-decoration: none;
}

a#menu:visited {
  color: white !important;
}

a:active {
  color: red;
  text-decoration: none;
}

<nav>
  <ul>
    <li id="title">aytimothy's Website</li>
    <a href="javascript:;">
      <li id="menu"><i class="fa fa-bars" aria-hidden="true">=</i></li>
    </a>
    <a href="/blog">
      <li id="item" class="first item">Blog</li>
    </a>
    <a href="/forum">
      <li id="item" class="item">Forum</li>
    </a>
    <a href="/portfolio">
      <li id="item" class="item">Portfolio</li>
    </a>
    <a href="/support">
      <li id="item" class="item">Support</li>
    </a>
  </ul>
</nav>

预期行为

将鼠标悬停在等号（菜单符号的占位符）上将使自身和li#item 元素中的所有内容变为红色（用于测试），并且隐藏的元素（li#item）实际上会显示出来（`nav ul li #menu:hover ~ nav ul li#item）。

当用户将鼠标悬停在上面时，背景应该变成透明的红色。

意外行为

将鼠标悬停在= 标志上只会将其变为红色。

Answer 1

您的代码有一些错误：

1. 您的 html 不正确 - 通过将锚点放在 lis 中来解决此问题
2. ID 必须是唯一的 - 删除多个 ID
3. 您的 css 选择器完全错误 - 您想在悬停的 li 之后显示任何同级 li - 您不能完全限定同级选择器后的位，否则您说的是 li 后的任何导航同级，只需更改 tilda 后的位以匹配 li

body {
  font-family: sans-serif;
  margin: 0px;
  width: 100%;
}

nav {
  background-color: black;
  position: fixed;
  width: 100%;
  height: 196px;
  font-size: 64px;
  padding-top: 0px;
  z-index: 5;
}

nav ul {
  color: white;
  -webkit-padding-start: 32px;
  width: calc(100% - 32px);
}

nav ul li {
  display: block;
  float: left;
  height: 18px;
  padding-top: 8px;
}

nav ul li#title {
  min-width: 80%;
  font-weight: bold;
}

nav ul li#menu {
  width: 100px;
  height: 100px;
  color: white;
  display: block;
}

nav ul li#menu:hover {
  color: red !important;
}

nav ul li#menu:hover ~ li.item { /* target the class and use only li part after tilda */
  color: red !important;
  visibility: visible !important;
}

nav ul li#item.first {
  margin-top: 32px;
}

nav ul li.item {  /* target class instead of id */
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: -32px;
  height: 96px;
  padding: 16px;
  color: black;
  display: block;
  width: 100%;
  visibility: hidden;
}

nav ul li.item:hover {
  background-color: rgba(255, 0, 0, 0.5);
  text-decoration: underline;
}

a {
  color: black;
  text-decoration: none;
  width: 100%;
}

a#menu {
  color: white !important;
}

a:hover {
  color: blue;
}

a:visited {
  color: black;
  text-decoration: none;
}

a#menu:visited {
  color: white !important;
}

a:active {
  color: red;
  text-decoration: none;
}

<nav>
  <ul>
    <li id="title">aytimothy's Website</li>
    <li id="menu"><a href="javascript:;"><i class="fa fa-bars" aria-hidden="true">=</i></a></li>
    <li class="first item"><a href="/blog">Blog</a></li>
    <li class="item"><a href="/forum">Forum</a></li>
    <li class="item"><a href="/portfolio">Portfolio</a></li>
    <li class="item"><a href="/support">Support</a></li>
  </ul>
</nav>