用CSS奇数不透明转换

我有一个菜单，当鼠标结束时，颜色从白色逐渐变为棕色。但是，当我离开鼠标时，过渡从白色开始，当它从棕色变成白色时，我不知道为什么。当我移动鼠标时，转换很好。我复制CSS：用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; 
}

问候。

来源

2013-05-21 Antonio

不确定您的意思，但看看这些变化。这是你在找什么？

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对悬停立即生效，您可以像保留悬停一样进行悬停。

来源

2013-05-21 20:31:27

正是Christofer，我走上了第一次过渡的时间，使它更平常，但事实如此。非常感谢朋友。 – Antonio

我的回答有点乱，但我很高兴我能帮上忙。 –

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

来源

2013-05-21 19:13:54 Rezzo

结果是一样的。当文本具有不同的颜色时会发生这种情况。当我离开鼠标时，效果不能正常工作，首先，文本显示为白色，最大不透明度，然后由于转换而开始消失。我不想要下一个转换：悬停→白色0.5至棕色1→离开→白色1至白色0.5 但是悬停→白色0.5至褐色1→离开→棕色1至白色0.5 谢谢。 – Antonio

用CSS奇数不透明转换

回答

相关问题