菜单悬停时页面其余部分变暗 - '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，我希望有人能提供帮助？

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

Answer 1

问题不仅出在 jQuery 上，还出在 CSS 上。

您将 z-index:100 设置为 .darkness 但未将 z-index 设置为悬停元素。所以当 darkness 出现时，它位于 navigation

之上

位于 navigation 之上，navigation 不再悬停，因此（由于 JQ 函数）darkness 再次隐藏。

当 darkness 隐藏时，您可以将鼠标悬停在 navigation 上，以便它再次出现，然后您不能再次悬停 navigation，因为 darkness 在顶部并隐藏再次。依此类推 -> 因此 'flashing' 问题。

将 position:relative;z-index:9999 设置为 .navigation 或大于 darkness 的 z-index 并且在 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>

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

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

jquery

jquery-effects

jquery-hover