如何僅在懸停時顯示CSS轉換？

我已經加入到一個div的過渡，這樣當它盤旋時，顏色的變化，類似這樣的例子在這裏位：http://jsfiddle.net/78LWT/如何僅在懸停時顯示CSS轉換？

這裏的HTML代碼：

<div id="transition"></div>

這裏的CSS代碼：

#transition { 
    background-color: #DA1E1E; 
    width: 100px; 
    height: 100px; 
    transition: .5s background-color; 
    -webkit-transition: .5s background-color; 
    -moz-transition: .5s background-color; 
} 
#transition:hover { 
    background-color: #ADE1E1; 
}

但這裏有一個問題：http://jsfiddle.net/E295T/（相同的CSS和以前的代碼），這個HTML代碼：

<div id="transition"></div><br /> 
<button onclick="recolortransitiondiv();">Recolor that div!</button>

而且該JavaScript/jQuery代碼：

function recolortransitiondiv() { 
    $("#transition").css("background-color", "#1EDA1E"); 
}

這正是我的問題出現在當顏色是比盤旋在它（例如，當DIV是活動之外的任何方法來改變。，或者當div的屬性用JavaScript/jQuery改變時），我不希望顯示過渡，但我希望當我將鼠標懸停在div上時顯示過渡。

有什麼辦法可以解決這個問題嗎？我願意使用jQuery，純JavaScript，CSS和HTML。

來源

2014-01-07 think123

當你評論，如果你想防止transition而background-color使用button改變，做的方法是，在:hover塊

#transition:hover { 
    background-color: #ADE1E1; 
    transition: .5s background-color; 
    -webkit-transition: .5s background-color; 
    -moz-transition: .5s background-color; 
}

Demo 2上使用transition（background-color不會改變雖然，預讀）

注意：無論如何，您還需要以下解決方案，否則您的 background-color不會（甚至改變使用jQuery的background-color後，如果您關心:hover）來改變

Demo 3

這是因爲jQuery的增加它有優先級最高在線CSS /最具體的因此，:hoverbackground-color將不被尊重，你將不得不使用!important在這種情況下

Demo

#transition:hover { 
    background-color: #ADE1E1 !important; 
}

否則，它會更好，如果你喜歡添加和使用jQuery刪除class，而不是使用.css()方法，比你將不需要0爲好。

來源

2014-01-07 10:24:45

我想你一定誤會了。我不希望在使用按鈕更改背景顏色時在div上顯示任何轉場，但我希望在將鼠標懸停在div上時顯示轉場。 – think123

@ think123我編輯.. –

我必須說，唯一的問題是，當我停止在div上空盤旋時，沒有轉換。但誰在乎？接受爲答案。 – think123

如何僅在懸停時顯示CSS轉換？

回答

相關問題