奇怪的不透明度过渡与CSS

Question

我有一个菜单，当鼠标结束时，颜色从白色逐渐变为棕色。然而，当我离开鼠标时，从白色开始过渡，而它应该从棕色到白色，我不知道为什么。当我移动鼠标时，过渡很好。我复制CSS:

li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: opacity 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear;
}

问候。

Answer 1

不太确定您的意思，但看看这些变化。这是你要找的吗?

li{
letter-spacing: 2px;
margin-bottom: -10px;
max-width: 280px;
opacity: 0.5;
transition: all 1s linear;
}
li:hover{
color: #9b2108;
opacity:1;
transition: opacity 3s linear, color 3s linear;
}

正如你所看到的，我在悬停时过渡opacity和color，在悬停时过渡all。编辑:意识到你实际上可以改变悬停过渡到all。

或者如果你想让color在悬停时立即生效，你可以保留悬停过渡。

Answer 2

只有li元素需要应用过渡。

li {
    letter-spacing: 2px;
    margin: 0 0 -10px;
    max-width: 280px;
    opacity: 0.5;
    transition: opacity 1s linear;
}
li:hover {
    color: #9b2108;
    opacity: 1; 
}