如何在纯CSS中显示:hover上的所有同级 [英] How to show all siblings on :hover in pure CSS

问题描述

需要在悬停时选择所有同级<li>元素.尝试在此处接受答案，但它不起作用. JSFiddle此处

Need to select all sibling <li> elements on hover. Tried 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 -->

推荐答案

您的问题是选择器:

.menu li:hover ~ .menu li

隐藏的元素不能悬停，这意味着li:hover永远不会匹配元素.另外，通用同级组合器正尝试查找(后续)同级<li>元素从同级.menu元素降级的同级.该页面中没有匹配的元素.

A hidden element can't be hovered-over, which means that li:hover is never going to match an element. Also, the general-sibling combinator is trying to find (subsequent) siblings that are <li> elements descending from sibling .menu elements. Which matches no elements in the page.

将其转换为以下选择器:

Converting that to the following selector:

.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>元素，这意味着它将并且 can 永远不会显示 first <li>.

works; that said it will - because of the general sibling combinator - match only those <li> elements with a preceding <li> sibling, which means it will, and can, never show the first <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 -->

这篇关于如何在纯CSS中显示:hover上的所有同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！