为什么 :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

您的代码存在一些错误：

您的 html 不正确 - 通过将锚点放在 lis 中来解决此问题
ID 必须是唯一的 - 删除多个 ID
你的 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>

为什么 :hover 不影响此示例中的另一个元素？

Why doesn't :hover affect another element in this example?

css

hover

css-selectors

nav

预期行为

意外行为