如何在 :hover in pure CSS 上显示所有兄弟姐妹

Question

悬停时需要 select 所有同级 <li> 元素。尝试过 accepted answer here but it is not working. 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 永远不会匹配元素。此外，general-sibling 组合器正在尝试查找（后续）兄弟姐妹，这些兄弟姐妹是 <li> 元素从兄弟姐妹 .menu 元素下降而来的。不匹配页面中的任何元素。

将其转换为以下选择器：

.menu:hover li ~ li

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

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

有效；那说它会 - 因为一般的兄弟组合器 - 只匹配那些 <li> 元素与前面的 <li> 兄弟，这意味着它会，并且可以，永远不会先显示 <li>.

因此，我建议使用：

.menu:hover li

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

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

如何在 :hover in pure CSS 上显示所有兄弟姐妹

How to show all siblings on :hover in pure CSS

html

css

css-selectors