使用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>