中的效果正常状态：鼠标悬停时的效果图：问题是鼠标悬停时快速多次点击鼠标会导致悬停状态失效。这个问题在windows浏览器中经常出现（包括windows版的Chrome，FireFox），虽然在macOs的各种浏览器中很少出现。一个简单的解决Hover状态丢失的基本思路是在鼠标点击时在.block中添加isActive类，强制显示Hover中的样式。当鼠标一直点击导致hover消失时，由于添加了isActive类，hover中的样式依然会显示。/*.isActive与:hover*/具有相同的样式.block:hover.block__overlay,.block.isActive.block__overlay{background-color:rgba(100,200,0,.5);}JS文件：varblock=document.getElementsByClassName("block")[0];block.addEventListener('mouseout',function(evt){//当鼠标悬停时，连续快速点击鼠标可能会触发mouseout事件，虽然它并没有真正将鼠标移出向上。//这里用offsetX和offsetY来判断鼠标的位置是否还在.block内if(evt.offsetX<=0||evt.offsetY<=0||evt.offsetX>=block.offsetWidth||evt.offsetY>=block.offsetHeight){console.log('真的搬出去了');如果(this.classList.contains('isActive')){this.classList.remove('isActive');}}}，错误的）;block.addEventListener('click',function(evt){if(!this.classList.contains('isActive')){this.classList.add('isActive');}},false);Hoverstatelost一般解决方案如果.block中有多个定位元素，当鼠标在子元素内部向上移动时，虽然鼠标可能还在.block内部，但是evt.offsetY可能为负数。按照上面简单的解决方法，结果是鼠标在.block之外，这是错误的。为此，我们需要一个通用的解决方案。下图显示了一个效果示例。我们在.block中添加一个红色??并勾选CSS代码，请参考：https://github.com/JackieGe/a...提取HTML代码：可以看到block__circle.