菜单悬停时页面其余部分变暗 - 'flashing'问题

Question

我试图在我的网站大型菜单上悬停时使页面的其余部分变暗。虽然效果在某种程度上有效，但它似乎闪烁开和关闭，或者闪光关闭然后不再重新亮起(即使我将鼠标悬停在正确的元素上(。

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>

黑暗div，为页面的其余部分提供变暗元素(CSS工作正常(。这是我正在努力解决的问题，我希望有人能提供帮助？

正如我上面所说，这是我目前得到的闪烁效果，即使将鼠标悬停在上面 jquery 代码中包含的元素上也是如此。

Answer 1

问题不仅在于jQuery，还在于CSS。

将z-index:100设置为.darkness，但不设置悬停元素的z-index。 因此，当darkness出现时，它位于navigation

在navigation的顶部，navigation不再悬停，所以(因为JQ功能(darkness再次隐藏。

当darkness被隐藏时，您可以将鼠标悬停在navigation上，以便它再次出现，然后您再次无法悬停navigation，因为darkness位于顶部并再次隐藏。 依此类推 ->因此是"闪烁"问题。

将position:relative;z-index:9999设置为.navigation或大于darkness的z索引，在JQ中只需使用.navigation(它包含其余元素，因此即使您将鼠标悬停在li上，悬停也会起作用(。

请参阅下面的片段

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>