Question

我试图在悬停我的网站超级菜单时调暗页面的其余部分。虽然效果在某种程度上起作用，但它似乎闪烁，或闪烁然后不再重新开启（即使我将鼠标悬停在正确的元素上）。

＆＃13;

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();
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

黑暗div，给页面的其余部分暗化元素（CSS工作正常）。这是我正在努力的jquery，我希望有人可以提供帮助吗？

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

Answer 1

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

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

之上

位于navigation之上，navigation不再悬停（因为JQ功能）darkness再次隐藏。

隐藏darkness后，您可以将鼠标悬停在navigation上，以便它再次显示，然后您再次无法悬停navigation，因为darkness位于顶部并再次隐藏。等等 - ＆gt;因此“闪烁”的问题。

将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>

在菜单上悬停页面的其余部分 - ＆＃39;闪烁＆＃39;问题

1 个答案: