Question

我有以下代码：

<div id="area">
  <p>
    Area here
  </p>
</div>

jQuery的：

$('#area').on('mouseenter', function(event){
  $('#area').addClass('active');
});

$('#area').on('mouseleave', function(event){
  $('#area').removeClass('active');
});

SCSS：

#area{
  height:100px;
  width:500px;
  background:blue;

  &.active{
    height:50px;
  }
}

当我将鼠标悬停在#area上时，它正在改变（并且应该）它的高度低于原始高度。但是当悬停动作从页面底部开始直到div时，高度就会模糊不清。

问题视频： https://streamable.com/phzka

小提琴： https://jsfiddle.net/gbL50pqj/3/

这是因为在进行悬停动作时改变高度，但是防止它有多大部分的最佳方法是什么？这就是我的尝试：

$('#area').on('mouseleave', function(event){
  $('#area').stop().removeClass('active');
  e.stopImmediatePropagation();
  e.preventDefault();
});

Answer 1

问题是事件发生得太快了。

如果对CSS过渡应用延迟，则会修复闪烁由你来调整......

.stop()仅对jQuery动画有效...对添加/删除类没有影响。

＆＃13;

$('#area').on('mouseenter', function(event){
  $('#area').addClass('active');
});

$('#area').on('mouseleave', function(event){
  $('#area').removeClass('active');
});

＆＃13;

#area{
  height:100px;
  width:500px;
  background:blue;
  transition: 0.6s;  /* Transition delay */

  /* SCSS
  &.active{
    height:50px;
  }
  */
}

#area.active{  /* SCSS Equivalent for SO example */
  height:50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="area">
  <p>
    Area here
  </p>
</div>

＆＃13;

修改

你可以使用另一个＆＃34;透明＆＃34; div位于可见＆＃34;区域上方＃34}。因此，鼠标进入和离开将在高度不变的div上触发。

下面，我为它添加了一个红色边框，这样你就可以看到它的位置。

＆＃13;
＆＃13;
$('#area_transparent').on('mouseenter', function(event){ $('#area').addClass('active'); }); $('#area_transparent').on('mouseleave', function(event){ $('#area').removeClass('active'); });
＆＃13;
#area{ height:100px; width:500px; background:blue; position: relative; z-index:1 /* SCSS &.active{ height:50px; } */ } #area.active{ /* SCSS Equivalent for SO example */ height:50px; } #area_transparent{ height:100px; width:500px; position: absolute; z-index:100; border: 1px solid red; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="area"> <div id="area_transparent"></div> <p> Area here </p> </div>
＆＃13;
＆＃13;
＆＃13;

鼠标悬停的模糊/越野车div

1 个答案: