Wie werden CSS-Übergänge nur beim Hover angezeigt?

Question

Ich habe einen Übergang auf einen div hinzugefügt, so dass, wenn es auf schwebte ist, hier die Farbe ändert, etwas wie in diesem Beispiel: http://jsfiddle.net/78LWT/

Hier ist der HTML-Code:

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

Hier ist der CSS-Code :

#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; 
} 

Aber hier ist das Problem: http://jsfiddle.net/E295T/ (die gleiche wie vor CSS-Code), mit diesem HTML-Code:

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

Und Javascript/jQuery-Code:

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

Und das ist, wo mein Problem kommt, wenn die Farbe von jedem anderen Verfahren als die Maus über sie (zum Beispiel geändert werden soll, wenn das div aktiv ist. oder vielleicht, wenn die Eigenschaften der div mit JavaScript/jQuery geändert werden, möchte ich nicht, dass der Übergang angezeigt wird, aber ich möchte, dass der Übergang angezeigt wird, wenn ich den Mauszeiger über das div halte.

Gibt es eine Möglichkeit, dieses Problem zu lösen? Ich bin bereit, jQuery, einfaches JavaScript, CSS und HTML zu verwenden.

Answer 1

Wie Sie kommentiert, wenn Sie transition verhindern wollen, während die background-color geändert wird mit button, die Art und Weise zu tun ist, verwenden transition auf dem :hover Block

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

Demo 2(background-color wird sich nicht ändern obwohl, lesen Sie weiter)

Hinweis: Anyways Sie die unten Lösung als auch benötigen, sonst Ihre 012.351.background-color nicht

Demo 3geändert werden (Wenn Sie :hover Pflege auch nach dem background-color mit jQuery Ändern)

---

Das liegt daran, dass jQuery Inline-CSS fügt die höchste Präferenz hat/am genauesten und damit, :hoverbackground-color wird nicht respektiert werden, müssen Sie !important in diesem Fall

verwenden

Demo

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

---

Oder aber, es wäre besser, wenn Sie es vorziehen, das Hinzufügen und Entfernen class jQuery verwenden, anstatt .css() Methode zu verwenden, als Sie nicht !important als auch benötigen.