1

I've already checked out the question and subsequent answer on how to hide a div with css, but I could not figure out how to make it work if the different elements aren't under the same parent. For example:

<head>
  <style>
    section .city {
      display: none;
    }

    nav .london:hover ~ section .london {
      display: block;
    }
  </style>
</head>

<body>
  <nav>
    <div class="city london">London</div>
  </nav>
  <section>
    <div class="city london">
      <p class="text">London text etc.</p>
    </div>
  </section>
</body>

Here, I'd like to only show the .text element when the appropriate div in the nav section is being hovered over. This works without the nav & section areas, as the divs become siblings, but how would I obtain the same behaviour while still using the nav and section tags?

Community
  • 1
  • 1
platelminto
  • 318
  • 3
  • 16
  • there you want to traverse through parent of an element, which is not yet possible using html,css only. You need to use JS based solution for this. – Mohit Bhardwaj May 05 '16 at 17:23
  • 1
    thats not possible using CSS only – dippas May 05 '16 at 17:24
  • @Mike In this case, would not using the nav and section tags be recommended or should I just go ahead and use JavaScript? – platelminto May 05 '16 at 17:38
  • Closest way to achieve is by calling the parent selectors - http://kodeweave.sourceforge.net/editor/#4ee7868cb6ebb071fe61991b47c586cd – Michael Schwartz May 05 '16 at 18:12
  • @MichaelSchwartz In the full code, I have multiple cities and want a specific text to show when the specific element in the navigation bar is being hovered over (not the entire nav bar). Is there still a way to do this? – platelminto May 05 '16 at 18:35
  • The way you want to do it is not possible in CSS. You can do it in JS easily. In CSS however you [would have to change your markup](http://kodeweave.sourceforge.net/editor/#02f135244ce682a474922f2ba374de51). – Michael Schwartz May 05 '16 at 19:01

1 Answers1

-1

It is possible to do it using this solution.

The label can be detached from <input type "checkbox" id="checkBtn">, only input element and the element to be hidden/shown on clicking the label must belong to the same parent.

BanAnanas
  • 478
  • 8
  • 17