How to expose div element while hover on another using css

Question

This is a code I have

<div class="pageNav">
    <div class="pageNav-elements main-part">
        <span>Home</span>
        <span class="Promos">Promotions</span>
        <span class="Pokerrooms">Poker rooms</span>
    </div>
    <div class="Promos-tab hidden">
        <span>Races</span>
        <span>Freerolls</span>
    </div>
    <div class="Pokerrooms hidden">
        <span>Poker888</span>
        <span>FullTiltPoker</span>
    </div>
</div>

What I want is to expose .Promos-tab.hidden element while hovering on .Promos element and to expose .Pokerrooms.hidden while hovering on .Pokerrooms.

What is very important, I don't want to change code structure!

This isn't possible with `CSS`. You can't expose an uncle by hovering on the nephew. — Angel Politis, Jul 15 '18 at 10:18
Okay, I changed code structure and luckily I was able to do what I wanted :) Thank you very much for your comments. — Tomas, Jul 15 '18 at 20:49

score -1 · Answer 1 · answered Jul 15 '18 at 10:54

Well the first thing what comes to my mind is to use JavaScript/Jquery for displaying the elements:

$(".Promos").hover(
  function(){
    $(".Promos-tab").css("display", "block");
  },
  function(){
    $(".Promos-tab").css("display", "none");
  });
$(".Pokerrooms").hover(
  function(){
    $(".Pokerrooms-tab").css("display", "block");
  },
  function(){
    $(".Pokerrooms-tab").css("display", "none");
  });

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageNav">
    <div class="pageNav-elements main-part">
        <span>Home</span>
        <span class="Promos">Promotions</span>
        <span class="Pokerrooms">Poker rooms</span>
    </div>
    <div class="Promos-tab hidden">
        <span>Races</span>
        <span>Freerolls</span>
    </div>
    <div class="Pokerrooms-tab hidden">
        <span>Poker888</span>
        <span>FullTiltPoker</span>
    </div>
</div>

But what I would suggest is that you should propably change your code structure to something like this so you can actually press the "dropdown" links if that is your intention:

https://www.w3schools.com/howto/howto_css_dropdown.asp

How to expose div element while hover on another using css

1 Answers1