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

Question

我试图在您点按菜单按钮时显示移动设备上带有菜单链接的导航栏。所以，我决定使用:hover CSS事件来显示它们。

In this example（or this demo，:hover用于使其他元素可见，并且工作正常。

如果没有<nav>和<li>之外的所有其他容器（#item和其他#menu元素），代码就可以正常工作。但是，当我将它实现到我当前的结构中时，它会停止工作; ...:hover ~ ...无法正常工作，...:hover仍有效（因为...是规则名称）。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

预期行为

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

当用户将鼠标悬停时，背景应变为透明红色。

意外行为

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

Answer 1

您的代码存在一些错误：

1. 你的HTML不正确 - 通过将你的锚点放在你的lis
来解决这个问题
2. ID必须唯一 - 删除多个ID
3. 你的css选择器是完全错误的 - 你希望在悬停之后显示任何兄弟姐妹 - 你不能在兄弟选择器之后完全限定该位，否则你在li之后说任何导航兄弟，只需改变tilda之后的位匹配李

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>