Question

当用户在按钮上悬停时，我在页面上显示一个简单的叠加层，但问题是它一直闪烁。我认为这是一个时间问题所以我尝试给它不同的淡入淡出和淡出时间，但这也没有帮助。

$(document).ready(function() {
  $(".container").hover(function() {
    console.log('test');
    $(".overlay").fadeIn();
  }, function() {
    $(".overlay").fadeOut();
  });
});

.overlay {
  display: none;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  opacity: .8;
}

.btn {
  background-color: gray;
  color: #fff;
  padding: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="btn">Testing</button>
</div>
<div class="overlay"></div>

JSFiddle Demo

Answer 1

问题是你的叠加层是你的容器的兄弟，所以当你将鼠标放在容器上时，叠加层会淡入，并且一旦在容器中褪色，就不会再看到鼠标并开始悬停的淡出部分。如果您在容器中移动了叠加层，那么当您将鼠标悬停在容器上时，鼠标仍会在容器淡入时进行注册，并且您不会卡在该闪烁循环中。

array([[ -9, -18, -27], [-999, -1998, -2997], [ 11, 22, 5], [ 90, 180, 270], [-900, -1800, -2700], [ 110, 220, 302]]) Shape: 6 X 3

$(document).ready(function() { $(".container").hover(function() { console.log('test'); $(".overlay").stop().fadeIn(); }, function() { $(".overlay").stop().fadeOut(); }); });

.overlay { display: none; position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); opacity: .8; } .btn { background-color: gray; color: #fff; padding: 14px; }

jquery简单叠加闪烁问题

1 个答案: