有没有办法在重复转换之前添加“冷却”延迟或需要用户输入？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有没有办法在重复转换之前添加“冷却”延迟或需要用户输入？相关的知识，希望对你有一定的参考价值。
使用CSS时，编码图像或框在悬停时移动会产生意外结果。如果鼠标位于转换开始处的点击区域中但不在结束处的位置，则转移效果将无限期重复并且如果没有延迟则口吃。下面是该问题的快速html / css演示：
div {
height: 200px;
width: 200px;
background-color: red;
}
div:hover {
margin-left: 100px;
}<!doctype html> <html>
<head> <title> Hover / Transition Demo </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body>
<div> </div>
</body>
</html>要重现此问题，请将鼠标悬停在红色框的左侧，这会导致方块快速左右移动。
这个眼睛周围有干净的方式吗？有几种解决方案可以实现：盒子保持在起始位置;或结束位置;有一种延迟只适用于这种情况，以避免口吃效应;或者要求鼠标在转换重复之前移动至少一个像素。理想情况下，我想要所有这些解决方案，但只有一个会很棒！提前致谢。
答案
这不是一个完美的解决方案，但这证明了我在评论中试图传达的内容。悬停状态位于红色框的父级。您可以将光标拖到红色框上，这表明悬停在红色框上仍然会触发悬停效果。这是因为负边距增加了.wrapper的宽度，但这是基本概念。如果您需要更详细的解决方案，则必须提供有关您正在处理的特定案例的更多信息，而不是这个简单的演示。
编辑：我已更新代码以使用pointer-events:none。这是better supported比我想象的那样（IE 11+）。这是一个CSS规则，它告诉浏览器忽略源自具有样式规则的元素的鼠标事件（在本例中为悬停）。
.wrapper {
height: 200px;
width: 200px;
}
.box {
height: 200px;
width: 200px;
background-color: red;
pointer-events: none;
}
.wrapper:hover .box {
margin-left: 100px;
}<!doctype html> <html>
<head> <title> Hover / Transition Demo </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body>
<div class="wrapper">
<div class="box"> </div>
</div>
</body>
</html>以上是关于有没有办法在重复转换之前添加“冷却”延迟或需要用户输入？的主要内容，如果未能解决你的问题，请参考以下文章
如何检查键盘按钮是不是收到垃圾邮件并在再次按下之前添加冷却时间