Question

我是HTML＆amp; CSS，这是我的第一个问题。当你用鼠标悬停它时，我试图制作一个从1.0扩展到0.8的方框。

当你在盒子中间（0.0之间的0.8）中使用鼠标时，它可以正常工作。

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

我希望当您在任何时间悬停整个0.8区域时，该框会缩放到1.0。当我离开固定的1.0区域时，它应该缩放到1.0。不是任何其他领域。我不能帮助自己。

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

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

Answer 1

问题是当元素缩放时，滚动事件会触发并模糊。你正在检测一个：悬停，但是当元素变得足够小时它会失去它：悬停状态并尝试再次向上扩展。再回来（因为它进入：再次悬停）。

解决此问题的方法之一是检测父元素上的悬停（不会缩放）。例如：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

1 个答案: