Show div on hover doesn't work with Bootstrap 4 nav

Question

I have a Bootstrap 4 navbar and I want another section to appear below it when you hover over a specific link. And I've written everything, the thing is, it doesn't work for some reason. I've tried using a:hover div {} and a:hover + div {} to make sure it's not the structure of CSS.

Can someone take a look and let me know what is going on? Please open the snippet in full screen.

.hover {
  background: red;
  display: none;
}

#projects:hover + .hover {
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<nav class="navbar navbar-toggleable-md fixed-top">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
    <a class="navbar-brand" href="/">
      <img src="..." alt="Logo">
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item" id="projects">
          <a class="nav-link" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<div class="hover">
  hover
</div>

Do you want submenu items in the link to appear or a section outside the nav bar to appear? — repzero, Jun 10 '17 at 01:50

score 2 · Accepted Answer · answered Jun 10 '17 at 01:53

Consider the section below

#projects:hover + .hover {
  display: block;
}

Whenever you hover over #projects it will change the display to block on any sibling elements that immediately follows #projects but there is no elements with .hover that follows #projects. So this will never work. the .hover container is placed outside the nav bar and I believe you would like to show that .hover container when you hover of the link.

To note, with css, you can write rules to style elements from parent to child or surrounding siblings but you cannot go up the chain to the parent and afterwards to the parent sibling.

One option is to place the section inside the navbar but this will look somehwhat ugly to show a whole section in the nav ( I am assuming you do not want sub menu items).

You can achieve this, with some javascript (jquery for a shorter solution). The solution below demonstrates a hover on a menu link that triggers the display of a section .hover which is outside the nav bar

function show() {
  $(".hover").css({
    display: "block"
  })
}

function hide() {
  $(".hover").css({
    display: "none"
  })
}
$("#projects").hover(show, hide)

.hover {
  background: red;
  display: none;
}

#navt {
border:solid red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<nav class="navbar navbar-toggleable-md fixed-top">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" id="navt">
                    <span class="navbar-toggler-icon"></span>click here
                </button>
    <a class="navbar-brand" href="/">
      <img src="..." alt="Logo">
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item" id="projects">
          <a class="nav-link" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<div class="hover">
  hover
</div>

Thank you @repzero for that solution and your detailed explanation! Really appreciate it! +1 — Retros, Jun 10 '17 at 02:05

score 0 · Answer 2 · answered Jun 10 '17 at 02:00

The method what you have been trying only works for sibling elements.

Example: Two <div> elements (Try this)

<style type="text/css">
    .faa {
        height:200px;
        width:200px;
        background: blue;

    }
    .boo {
        height:200px;
        width:200px;
        background: yellow;

    }
    .boo:hover ~ .faa{
        display: none;
    }
  </style>

  <div class="boo"></div>
  <div class="faa"></div>

This can not be done with CSS, So Try below JQuery code block to solve your problem,

$(function() {
        $("#projects").hover(function(){
            $('.hover').show(400);
        }, function(){
            $('.hover').hide(400);
        });
    });

You can know more, On a CSS hover event, can I change another div's styling?

Show div on hover doesn't work with Bootstrap 4 nav

2 Answers2