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>☰</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>☰</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"