Skip to content Skip to sidebar Skip to footer

How To Show All Siblings On :hover In Pure Css

Need to select all sibling
  • elements on hover. Tried accepted answer here but it is not working. JSFiddle here
  • Solution 1:

    Your problem is the selector:

    .menuli:hover ~ .menuli

    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:hoverli ~ li

    .menu {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      ;
      background-color: #777;
    }
    .menuli {
      float: none;
      display: none;
    }
    .menulia {
      display: block;
      padding: 10px20px10px20px;
      text-decoration: none;
      color: #bbb;
    }
    .menulia:hover {
      color: #fff;
    }
    .menu.btn {
      display: block;
      cursor: pointer;
    }
    .menu:hoverli ~ li {
      display: block;
    }
    <!--NEED SOLUTION WITHOUT ALTERING HTML --><ulclass="menu"><liclass="btn"><a>&#9776;</a></li><li><ahref="/">Home</a></li><li><ahref="/portfolio">Portfolio</a></li><li><ahref="/contact">Contact</a><ulclass="sub-menu"><li><ahref="/">Sub Menu</a></li><li><ahref="/portfolio">Sub Menu</a></li></ul></li></ul><!--NEED SOLUTION WITHOUT ALTERING HTML -->

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

    So, instead, I'd suggest using:

    .menu:hoverli

    .menu {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      ;
      background-color: #777;
    }
    .menuli {
      float: none;
      display: none;
    }
    .menulia {
      display: block;
      padding: 10px20px10px20px;
      text-decoration: none;
      color: #bbb;
    }
    .menulia:hover {
      color: #fff;
    }
    .menu.btn {
      display: block;
      cursor: pointer;
    }
    .menu:hoverli {
      display: block;
    }
    <!--NEED SOLUTION WITHOUT ALTERING HTML --><ulclass="menu"><liclass="btn"><a>&#9776;</a></li><li><ahref="/">Home</a></li><li><ahref="/portfolio">Portfolio</a></li><li><ahref="/contact">Contact</a><ulclass="sub-menu"><li><ahref="/">Sub Menu</a></li><li><ahref="/portfolio">Sub Menu</a></li></ul></li></ul><!--NEED SOLUTION WITHOUT ALTERING HTML -->

    Post a Comment for "How To Show All Siblings On :hover In Pure Css"