當鼠標移開鏈接時，CSS轉換不起作用

即時通訊我的CSS有一些問題，我有一個按鈕，我給了它一些CSS以添加Webkit轉換的顏色變化效果，顏色變化適用於懸停但是當鼠標被拿掉按鈕，它不會顯示它的作用恢復到以前的樣子，我的繼承人CSS當鼠標移開鏈接時，CSS轉換不起作用

.button-blue{ 
    border: 1px solid #00B7EF; 
    border-radius: 5px; 
    color: #00B7EF !important; 
    background-color: transparent; 
    -webkit-transition-property: background-color, color; 
    -webkit-transition-duration: 0.5s; 
    webkit-property: background-color, color; 
    webkit-duration: 0.5s; 
} 

.button-blue:hover { 
    border: 1px solid #00B7EF; 
    border-radius: 5px; 
    color: white !important; 
    background-color: #00B7EF; 
    -webkit-transition-property: background-color, color; 
    -webkit-transition-duration: 0.5s; 
    webkit-property: background-color, color; 
    webkit-duration: 0.5s; 
}

來源

2016-01-24 Kawaii_Kat17

請創建一個小提琴：http://www.jsfiddle.net – AMACB

在這裏它是，它的藍色getstarted按鈕是一個即時通訊嘗試修復:) https://jsfiddle.net/v4o61zg0/ –

你沒有任何與「un-hovering」有關的css。 – AMACB

你已經有過渡性質爲您的href如前所述所以之前與您的href陳述一次，刪除從你的按鈕的過渡屬性，所以你的CSS會看起來像這樣：

工作小提琴Fiddle

.navigation-bar ul li a { 
    color: #333333; 
    text-decoration: none; 
    font-family: 'Roboto', sans-serif; 
    font-size: 19px; 
    font-weight: 400; 
    font-style: bold; 
    padding: 5px 5px 10px 10px; 
     -webkit-transition-property: background-color, color; 
     -webkit-transition-duration: 0.5s; 
     webkit-property: background-color, color; 
     webkit-duration: 0.5s; 
} 
.button-blue{ 
    border: 1px solid #00B7EF; 
    border-radius: 5px; 
    color: #00B7EF !important; 
    background-color: transparent; 
} 

.button-blue:hover { 
    border: 1px solid #00B7EF; 
    border-radius: 5px; 
    color: white !important; 
    background-color: #00B7EF; 

}

來源

2016-01-24 05:16:15

哦！非常感謝！！！ :) –

webkit-property和webkit-duration不 CSS屬性。正確的語法是transition-property和 transition-duration。

-webkit-是僅適用於歌劇的谷歌瀏覽器及更高版本的CSS功能vendor prefix。
在僞類爲:hover狀態，你只需要申報屬性，你會改變，沒有必要重複已經宣佈的。所以，border-radius已經不在了（除非你想要改變它）。
您必須將轉換設置爲默認狀態。如果您再次聲明：懸停狀態，您將爲轉換創建第二個實例，這就是爲什麼您在按鈕上獲得了此動畫的原因。
您已經在.navigation-bar ul li a中聲明過渡（並且僅爲顏色而不是背景）。

所以，現在你有specificity一個問題，因爲在CSS定位父類，然後直接瞄準到HTML 元素有很多優先不是隻針對一類（You can check it here）。
如果所有a元素在你的.navigation-bar將有相同的過渡，你可以在這裏設置。 （不理想，但它的工作原理清潔，會少一些變化。）

您還需要添加背景的過渡。這不會改變您的其他鏈接，因爲如果您沒有在懸停（或焦點）狀態中設置背景，它將不會更改。

而且很明顯，你必須從 .button-blue刪除過渡，因爲你不會使用它了（這將是重複）。
嘗試modularise更多你的CSS （不要重複自己）。您可以瞭解更多搜索BEM，OOCSS或SMACSS （這是一個品味的問題）

來源

2016-01-24 06:47:26 Ravenous

當鼠標移開鏈接時，CSS轉換不起作用

回答

相關問題