双圈按钮悬停

Posted 2023-05-08

【中文标题】双圈按钮悬停

【英文标题】：Double circle button hover

【发布时间】：2015-10-23 17:17:15

【问题描述】：

我制作了一个由两个圆圈组成的按钮，如下所示：

$('.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>

我希望当我将鼠标悬停在它上面时会出现覆盖，所以我的问题是当我将鼠标悬停在它上面时，在第一个和第二个圆圈之间有一个断点，这使得覆盖消失并出现我该如何修复它?

【参考方案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>

【参考方案2】：

这不是因为圆圈之间的空间，而是从外圈移动到内圈会触发一个指针事件（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>