html - 鼠标悬停在文字效果上

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 在元素悬停时转换所有可转换的内容。在这里，您也告诉它在交互后也转换到正常状态。

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