61878

How to show all siblings on :hover in pure CSS

Question:

Need to select all sibling <li> elements on hover. Tried <a href="https://stackoverflow.com/questions/8335673/selecting-siblings-on-hover" rel="nofollow">accepted answer here</a> but it is not working. <a href="http://jsfiddle.net/656kqjvp/" rel="nofollow">JSFiddle here</a>

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><!--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 -->

Answer1:

Your problem is the selector:

.menu li:hover ~ .menu li

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

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><!--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 -->

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 <em>can</em>, never show the <em>first</em> <li>.

So, instead, I'd suggest using:

.menu:hover li

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><!--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 -->

Recommend

  • Changing div heights using CSS grid
  • How to set div exactly in the center of screen whose size is changing dynamically
  • Javascript - Infinite scroll JSON array?
  • dojo 1.9: what annotation does declare.safeMixin add?
  • I don't get what's the difference between format() and … (python)
  • QPushButton is not changing the background-color proper
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • How to define an array of floats in Shader properties?
  • Scala: Function returning an unknown type
  • Responsive left sidebar open close
  • insert radio value multiple data codeigniter in database to one row?
  • Prevent page break in text block with iText, XMLWorker
  • Universal Image Loader reuse images
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Custom validator control occupying space even though display set to dynamic
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Can I check if a recipient has an automatic reply before I send an email?
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • MySQL WHERE-condition in procedure ignored
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Web-crawler for facebook in python
  • Traverse Array and Display in markup
  • trying to dynamically update Highchart column chart but series undefined
  • How to set the response of a form post action to a iframe source?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • Android Google Maps API OnLocationChanged only called once
  • Busy indicator not showing up in wpf window [duplicate]
  • java string with new operator and a literal