悬停在文字效果上答案

【问题标题】：Hover over text effect悬停在文字效果上
【发布时间】：2023-04-04 05:45:01
【问题描述】：

我对 HTML 和 CSS 还很陌生，但这里仍然是。

我已经将这段代码放在一起，以使导航栏中的文本在悬停时发光：

li:hover {
    color: orange;
    cursor: default;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

但是，一旦我将光标从文本中移开，发光就会立即消失，而不是像亮起时那样逐渐减弱。

有谁知道我必须添加什么才能达到这个效果？

提前干杯。

【问题讨论】：

现在过渡只在悬停时退出。因此，当您将光标移开时，li 没有设置任何转换。将你的 CSS 的过渡部分移动到一个常规的 li{} 选择器，你会很成功！祝你好运！

标签： html css

【解决方案1】：

只需将过渡添加到您的li

li {
    transition: all 500ms ease;
}

您需要为所有状态设置转换。与li:hover 一样，您告诉CSS 在元素悬停时转换所有可转换的内容。在这里，您告诉它在交互之后也转换到正常状态。

https://jsfiddle.net/Kyle_Sevenoaks/L5s2h1k7/

【讨论】：

@HSmith 加了个jsfiddle例子让你看看效果

【解决方案2】：

在 hover 属性之前定义 li 的 default 属性。

li {
/*Default properties + animation*/
}

li:hover {
/*OnHover Properties + animation*/
}

现在它将按照您的意愿进行动画处理。

【讨论】：

显示适当的 CSS 语句以帮助人们理解您的答案会很有帮助
@StephenReindl 谢谢。

【解决方案3】：

您还可以为其添加background:#0070ba; 颜色。

li {
    transition: all 500ms ease;
}
li:hover {
    background:#0070ba;
    color: #fff;
    cursor: default;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

【讨论】：