使用 CSS 进行奇怪的不透明度过渡答案

【问题标题】：Odd opacity transition with CSS使用 CSS 进行奇怪的不透明度过渡
【发布时间】：2013-05-16 16:03:18
【问题描述】：

我有一个菜单，当鼠标悬停时，它会逐渐将颜色从白色变为棕色。但是，当我离开鼠标时，当它应该从棕色变为白色时，从白色开始过渡，我不知道为什么。当我将鼠标移到上方时，过渡很好。我复制 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;
}

您好。

【问题讨论】：

标签： css-transitions opacity

【解决方案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 在悬停时立即生效，您可以保持悬停过渡不变。

【讨论】：

正是克里斯托弗，我提高了第一个过渡的秒数以使其更正常，但就是这样。非常感谢朋友。
我的回答有点乱，但我很高兴能帮上忙。

【解决方案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; 
}

【讨论】：

结果是一样的。当文本具有不同的颜色时会发生这种情况。当我离开鼠标时，效果无法正常工作，首先文本以最大不透明度显示为白色，然后由于过渡而开始消失。我不想要下一个过渡：悬停 -> 白色 0.5 到棕色 1 -> 离开 -> 白色 1 到白色 0.5 但悬停 -> 白色 0.5 到棕色 1 -> 离开 -> 棕色 1 到白色 0.5 谢谢。跨度>