用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奇數不透明轉換

回答

相關問題