CSS: :hover and Sibling Selector <p>I have a case where my design requires me to declare this class:</p> <pre class="lang-css prettyprint-override"><code>.panel { position: fixed; top: 100vh; height: 90vh; margin: 0px; padding: 0px; width: 100%; transition-property: top; transition-duration: 1s; } .panel:before { background-color: inherit; top: -1.5em; width: 10em; text-align: center; font-weight: bold; content: attr(id); position: absolute; border-bottom: none; border: .5em solid black; border-top-color: inherit; border-left-color: inherit; border-right-color: inherit; border-bottom: none; border-radius: 25%; border-bottom-right-radius: 0%; border-bottom-left-radius: 0%; } </code></pre> <p>In short, panels are tabs that fly in when targeted via an <code>&lt;a href="panel id"&gt;foo&lt;/a&gt;</code> style link.</p> <p>In their default state panels sit just under the bottom of the screen, This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.</p> <p>HTML for these panels is <code>&lt;section id="about" class="panel color"&gt;...&lt;/section&gt;</code> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.</p> <p>So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.</p> <p>I had believed that <code>a:hover ~ * .panel { top: 97vh; }</code> was the correct solution to do this, but it doesn't seem to be firing.</p>