双圈按钮悬停

Question

我做了一个由两个圆圈组成的按钮：

$('.circle').mouseover(function(){
   $('.overlay').animate({opacity:0.7,}, 200);
  }); 
$('.circle').mouseout(function(){
 $('.overlay').animate({opacity:0}, 100);
});

.overlay{
 position:absolute;
 background:black;
 width:100%;
 height:100%;
 opacity:0;
}
 


.circle{
 position:absolute;
 width:30px;
 height:30px;
 border:1px dashed #fc7945;
 border-radius:50px;
 cursor:pointer;
 z-index:99;
}

.circle-in{
 width:20px;
 height:20px;
 margin-top:2px;
 background:none;
 margin-left:2px;
 border:3px solid #fc7945;
 border-radius:50px;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div> 

<a><div class="circle">
         <div class="circle-in"></div>
        </div></a>

我希望当我将鼠标悬停在它上面时出现叠加层，所以我的问题是当我将鼠标悬停在它上面时第一个和第二个圆圈之间有一个断点，这使得叠加层消失并出现我怎么能修理它？

Answer 1

stop() 当前-运行个动画：

$('.circle')
  .mouseover(function() {
    $('.overlay').stop().animate({  //add stop() here
      opacity: 0.7,
    }, 200);
  })
  .mouseout(function() {
    $('.overlay').stop().animate({  //and here
      opacity: 0
    }, 100);
  });

$('.circle')
  .mouseover(function() {
    $('.overlay').stop().animate({
      opacity: 0.7,
    }, 200);
  })
  .mouseout(function() {
    $('.overlay').stop().animate({
      opacity: 0
    }, 100);
  });

.overlay {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.circle {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px dashed #fc7945;
  border-radius: 50px;
  cursor: pointer;
  z-index: 99;
}
.circle-in {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: none;
  margin-left: 2px;
  border: 3px solid #fc7945;
  border-radius: 50px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div>

<a>
  <div class="circle">
    <div class="circle-in"></div>
  </div>
</a>

Answer 2

不是因为圆圈之间的space，而是从外圆移到内圆会触发指针事件（mouseout，mousein），从而导致动画重新开始。

您可以通过向内圈添加一行 CSS 完全禁用内圈上的那些事件来防止这种情况发生。其余代码可以保持不变，并且副作用几乎没有变化，因为您不需要动画的变通方法。 IE 自 version 11 起才支持此功能。

pointer-events: none;

$('.circle').mouseover(function(){
   $('.overlay').animate({opacity:0.7,}, 200);
  }); 
$('.circle').mouseout(function(){
 $('.overlay').animate({opacity:0}, 100);
});

.overlay{
 position:absolute;
 background:black;
 width:100%;
 height:100%;
 opacity:0;
}
 


.circle{
 position:absolute;
 width:30px;
 height:30px;
 border:1px dashed #fc7945;
 border-radius:50px;
 cursor:pointer;
 z-index:99;
}

.circle-in{
 width:20px;
 height:20px;
 margin-top:2px;
 background:none;
 margin-left:2px;
 border:3px solid #fc7945;
 border-radius:50px;
 cursor:pointer;
    pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div> 

<a><div class="circle">
         <div class="circle-in"></div>
        </div></a>

双圈按钮悬停

Double circle button hover

jquery

overlay

button

hover