JQuery Hover Flicker On Dropdown

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

Answer 2

如果删除两个li - 标记之间的空格，则闪烁消失 不过，我不知道如何消除CSS中的差距。正如Chiller提出的那样，margin-right: -5px删除它对我来说似乎不太可靠 - 也许在不同的浏览器中差距更小或更大？

修改
Found a solution：您可以在font-size: 0;上设置ul以消除差距。

// 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;
          font-size: 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>

所以要么这样，要么删除HTML代码中的空格：

<!-- ... -->
</li><li class="header-categories-item header-categories-item-active">
<!-- ... -->

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

两者都有效，但我更喜欢CSS解决方案（或两者兼而有之）。