Question

我对HTML＆amp; 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/

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

将鼠标悬停在文字效果上

3 个答案: