Question

我最近编写了一个带有跨度的段落来为每个字母设置动画。所以动画有效，但是当你将鼠标悬停在字母上时，它开始在顶部出现故障。我认为父元素会解决它，但我不知道如何将其设置为 p 父元素。代码如下：

  span {
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;
        }

        span:hover {
            color: orange;
            top: -10px;
        }

<p>
        <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
    </p>

Answer 1

问题原因 - 一旦您将鼠标悬停在跨度上，它就会向上滑动，但它不再位于您的鼠标光标之下，因此它向后回落并再次位于鼠标光标之下并上升.... . 这还在继续。

您可以尝试一个额外的 span 层，类为 faux 和一个带有 div 的包装器 display:flex，这样当我们将鼠标悬停在这个 faux 上时元素，则只有 相对定位 的子 span 元素向上移动。所以现在您的触发器是用于过渡的 faux 元素，而不是必须移动的 span 元素本身。

我选择了 span 元素作为我的 faux 元素。如果需要，您也可以使用 div 尝试变体。

.faux>span{
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;

}
        .faux:hover>span {
            color: orange;
            top: -10px;
        }
        
        .container{
        display:flex}

<p>

<div class='container'>
       <span class ='faux'>
        <span>H</span>
        </span>
        <span class ='faux'>
        <span>e</span>
        </span>
        <span class ='faux'>
        <span>l</span>
        </span>
        <span class ='faux'>
        <span>l</span>
        </span>
        <span class ='faux'>
        <span>o</span>
        </span>
        </div>
        
    </p>

Answer 2

“毛刺”是由用户的光标在角色向上移动后立即离开悬停状态引起的，然后它又落回光标处，因此您再次获得悬停动作，依此类推。

尝试将跨度设置为内联块 div，并为它们提供一点高度和透明背景，以便用户的光标在悬停时保持在元素内。

 div {
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;
            background-color: transparent;
            width: auto;
            height: 2em;
            display: inline-block;
        }

        div:hover {
            color: orange;
            top: -10px;
        }

        <div>H</div><div>e</div><div>l</div><div>l</div><div>o</div>

动画字母故障 CSS

2 个答案: