Dim rest of page on menu hover - 'flashing' issue

Question

I am attempting to dim the rest of the page on hover of my websites mega menu. Although the effect is working to some extent, it seems to flash on and off, or flash off and then not come back on again (even if I hover back over the correct element).

jQuery('.navigation,#mainMenu,.mega-menu-content,.mega-menu-item').hover(function() {
  jQuery('.darkness').fadeTo(0, 1);
}, function() {
  jQuery('.darkness').fadeTo(300, 0, function() {
    jQuery(this).hide();
  });
});

.darkness {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation" role="navigation">
  <ul id="mainMenu">
    <li>
      <a href="mywebsite">Standard Item</a>
    </li>
    <li class="mega-menu-item">
      <a href="mywebsite">Dropdown Item</a>
      <li>
        <div class="mega-menu-content">
          <div class="row">
            <div class="col-md-2">
              <ul class="sub-menu">
                <li class="level1">
                  <a href="mywebsite">Sub-Category</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>

  </ul>
</nav>
<div class="darkness"></div>

The darkness div, gives the rest of the page the darkening element (the CSS works fine). It's the jquery I am struggling with and I'm hoping someone can help?

As I say above, it's a flashing effect I am getting at the moment, even when hovering on elements that are included in the jquery code above.

Answer 1

the problem is not only with the jQuery but with the CSS .

you set z-index:100 to .darkness but don't set a z-index to the hovering element. so when the darkness appears, it is on top of the navigation

being on top of the navigation , the navigation is no longer hovered so ( because of the JQ function ) darkness hides again.

when darkness is hidden you can hover on navigation so it appears again, and then again you cannot hover the navigation because darkness is on top and hides again. and so on -> thus the 'flashing' problem.

set position:relative;z-index:9999 to .navigation or bigger than z-index of darkness and in JQ just use .navigation ( it contains the rest of the elements so the hover will work even if you hover on li ) .

see snippet below

jQuery('.navigation').hover(function() {
  jQuery('.darkness').fadeTo(0, 1);
}, function() {
  jQuery('.darkness').fadeTo(300, 0, function() {
    jQuery(this).hide();
  });
});

.darkness {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}
/*added css*/
.navigation {
 position:relative;
  z-index:101;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation" role="navigation">
  <ul id="mainMenu">
    <li>
      <a href="mywebsite">Standard Item</a>
    </li>
    <li class="mega-menu-item">
      <a href="mywebsite">Dropdown Item</a>
      <li>
        <div class="mega-menu-content">
          <div class="row">
            <div class="col-md-2">
              <ul class="sub-menu">
                <li class="level1">
                  <a href="mywebsite">Sub-Category</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>

  </ul>
</nav>
<div class="darkness"></div>