悬停缩放错误 div

Question

我是 HTML & CSS 的新手，这是我的第一个问题。我尝试制作一个框，当您用鼠标将其悬停时，它会从 1.0 缩放到 0.8。

当您将鼠标放在框的中间（0.0 在 0.8 之间）时，它工作正常。

但是当你在 0.8 和 1.0 区域之间时，每次我移动鼠标时它都会变得疯狂。

我希望当您随时将鼠标悬停在整个 1.0 区域时，框会缩放到 0.8。当我离开固定的 1.0 区域时，它应该缩小到 1.0。不是任何其他区域。我情不自禁。

测试或查看： https://jsfiddle.net/cyLxLbya/

YouTube 视频： https://youtu.be/4MT4hrK7DVE （左边在0-0.8之间，右边在0.8-1之间疯狂）

Answer 1

问题是您的滚动事件在元素缩放时触发和模糊。您正在检测 :hover 但是当元素变得足够小时，它会失去它的 :hover 状态并尝试再次放大。然后再次返回（因为它再次进入 :hover）。

解决此问题的方法之一是检测父元素上的悬停（不缩放）。例如：https://jsfiddle.net/cyLxLbya/1/

.box{
    display: inline-block;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75);
    transition: all 200ms ease;
    transition-duration: 0.2s; 
}

.hover:hover .box{
    transform: scale(0.8);
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75);
}

还建议将过渡移动到框本身（而不是框的悬停状态）。

悬停缩放错误 div

Scale bug with hover a div

html

css

hover