如何显示所有兄弟姐妹：悬停在纯CSS中

Question

需要在悬停时选择所有同级<li>元素。试过accepted answer here，但它没有用。 JSFiddle here

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;;
    background-color: #777;
}
.menu li {
    float: none;
    display: none;
}
.menu li a {
    display: block;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    color: #bbb;
}
.menu li a:hover {
    color: #fff;
}
.menu .btn {
        display: block;
        cursor: pointer;
}
.menu li:hover ~ .menu li{/*ON THIS HOVER NOT SHOWING ALL SIBLIING LIs*/
        display: block !important;
}

<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
            <li class="btn"><a>&#9776;</a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/portfolio">Portfolio</a></li>
            <li><a href="/contact">Contact</a>
                
            <ul class="sub-menu">
            <li><a href="/">Sub Menu</a></li>
            <li><a href="/portfolio">Sub Menu</a></li>
            </ul>
                
            </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->

Answer 1

你的问题是选择器：

.menu li:hover ~ .menu li

隐藏的元素无法悬停，这意味着li:hover永远不会与元素匹配。此外，通用兄弟组合器试图找到（后续）兄弟姐妹，这些兄弟是<li>元素从兄弟.menu元素下降。哪个匹配页面中没有元素。

将其转换为以下选择器：

.menu:hover li ~ li

＆＃13;

＆＃13;

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  ;
  background-color: #777;
}
.menu li {
  float: none;
  display: none;
}
.menu li a {
  display: block;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  color: #bbb;
}
.menu li a:hover {
  color: #fff;
}
.menu .btn {
  display: block;
  cursor: pointer;
}
.menu:hover li ~ li {
  display: block;
}

＆＃13;

<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
  <li class="btn"><a>&#9776;</a>
  </li>
  <li><a href="/">Home</a>
  </li>
  <li><a href="/portfolio">Portfolio</a>
  </li>
  <li><a href="/contact">Contact</a>

    <ul class="sub-menu">
      <li><a href="/">Sub Menu</a>
      </li>
      <li><a href="/portfolio">Sub Menu</a>
      </li>
    </ul>

  </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->

＆＃13;

＆＃13;

＆＃13;

工程;那说它会 - 因为一般的兄弟组合子 - 只匹配那些<li>元素与前面的<li>兄弟，这意味着它会，可以，永远不会显示< em> first <li>。

所以，相反，我建议使用：

.menu:hover li

＆＃13;

＆＃13;

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  ;
  background-color: #777;
}
.menu li {
  float: none;
  display: none;
}
.menu li a {
  display: block;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  color: #bbb;
}
.menu li a:hover {
  color: #fff;
}
.menu .btn {
  display: block;
  cursor: pointer;
}
.menu:hover li {
  display: block;
}

＆＃13;

<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
  <li class="btn"><a>&#9776;</a>
  </li>
  <li><a href="/">Home</a>
  </li>
  <li><a href="/portfolio">Portfolio</a>
  </li>
  <li><a href="/contact">Contact</a>

    <ul class="sub-menu">
      <li><a href="/">Sub Menu</a>
      </li>
      <li><a href="/portfolio">Sub Menu</a>
      </li>
    </ul>

  </li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->

＆＃13;

＆＃13;

＆＃13;