悬停文本效果

Question

我对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;
}

然而，当我从文本中移除光标时，发光就会立即消失，而不是像它亮起来时那样逐渐减少。

有人知道我要加些什么才能达到这个效果吗？

提前干杯。

Answer 1

只需将转换添加到您的li

li {
    transition: all 500ms ease;
}

您需要为所有状态设置转换。和li:hover一样，您告诉CSS转换所有的东西--当元素悬停时可以转换。在这里，您告诉它转换到它的正常状态后，相互作用，以及。

Sevenoaks/L5s2h1k7/

Answer 2

在悬停属性之前定义li的默认属性。

li {
/*Default properties + animation*/
}

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

现在它会像你想要的那样动起来。

Answer 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;
}