javascript - JQuery悬停在下拉菜单上闪烁

Question

我正在尝试在下面的 JSFiddle 中的类别之间切换，除了在隐藏和显示新内容时会出现闪烁外，它工作正常。

有办法解决这个问题吗？

https://jsfiddle.net/0q7fzh6u/1/

干杯

// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
menuItem.hover(function() {
  $("body").toggleClass("overlay-visible");
  $(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
});

.header-categories {
  position: relative;
  clear: both;
  background: #fff;
  z-index: 10;
}

.header-categories-list {
  margin-bottom: 0;
}

.header-categories-item {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0.2rem;
  line-height: 1;
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.header-categories-item a {
  color: #000;
}

.header-categories-item-block {
  display: block;
  padding: 0;
  border-top: 1px solid $black;
}


/* overlay */

#site-overlay {
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #999;
  transition: .25s;
}

.overlay-visible #site-overlay {
  visibility: visible;
  opacity: 1;
}


/* Dropdown */

.header-categories-dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-height: 300px;
  padding: 15px 0;
  background: #fff;
}

li {
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.header-categories-dropdown.categories-dropdown-visible {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML

<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
  <ul class="header-categories-list list-unstyled">
    <li class="header-categories-item header-categories-item-active"><a href="<?php echo $category['href']; ?>">category name 1</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
      </ul>
    </li>
    <li class="header-categories-item header-categories-item-active"><a href="#">category name 2</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

导致此问题的原因是 li 标记 .header-categories-item 之间存在间隙，因此无论何时将鼠标悬停在该间隙上，都会出现轻弹

您可以通过将 margin-right: -5px; 添加到 .header-categories-item 来消除间隙

See updated fiddle