onmouseout - zurück zu css class color

Question

Das könnte eine wirklich offensichtliche Frage sein, ich habe es gerade für eine Weile fest und kann nichts im Web finden. Im Moment habe ich die folgende (sehr einfach) html div:

<div class="unselected" 
    onmouseover="this.style.backgroundColor='yellow'" 
    onmouseout="this.style.backgroundColor='??' > 

In meinem Webapp, ich dynamisch die Klasse des div ändern (zwischen ausgewählten und nicht ausgewählten Hintergrundfarbe des div zu ändern). Gibt es eine Möglichkeit, onmouseout backgroundColor als Hintergrundfarbe der Klasse (wie im Stylesheet definiert) zu ändern?

Mit anderen Worten, ich bin auf der Suche nach so etwas wie

onmouseout="this.style.backgroundColor=this.class.default-background-color 

Ist das möglich? Dies scheint für jede Seite fast notwendig zu sein (es sei denn, sie möchten die Farben an zwei Stellen anstatt nur an dem Stylesheet ändern), aber es scheint kein Leitfaden online zu sein.

Vielen Dank!

Answer 1

Sie sollen eine unaufdringliche Art und Weise, das Hinzufügen & Entfernen einer CSS-Klasse verwenden:

css:

.yellow { 
    background-color: yellow !important; 
} 

$(function() { 
    $('div.unselected').hover(function() { 
     $(this).addClass('yellow'); 
    }, function() { 
     $(this).removeClass('yellow'); 
    }); 
}); 

Answer 2

Der schönste Weg, dies ist mit einer Klasse zu tun.

Erstellen Sie zunächst eine yellowBg Klasse:

.yellowBg { 
    background-color: #0ff; 
} 

Dann nutzen jQuery es mit der Maus darüber zu übernehmen und sie auf mouseout entfernen:

$(document).ready(function(){ 
    $('.unselected').mouseover(function(){ 
     $(this).addClass('yellowBg'); 
    }).mouseout(function(){ 
     $(this).removeClass('yellowBg'); 
    }); 
}); 

Answer 3

$('.unselected').hover(function(){ //mouseout 
    // if not has data-origColor 
    if(!$(this).data('origColor')) 
     $(this).data('origColor', this.style.backgroundColor); 

    this.style.backgroundColor = 'yellow'; 
}, function(){ //mouseover 
    this.style.backgroundColor = $(this).data('origColor'); //pull from data 
}); 

Answer 4

eine Eigenschaft auf eine leere Zeichenfolge Set zu von außerhalb des style-Attributs in die kaskade zurückkehren.

<div class="unselected" 
onmouseover="this.style.backgroundColor='yellow'" 
onmouseout="this.style.backgroundColor='' > 

(aber in der Regel versuchen, das Styling in Sheet zu halten, anstatt Stilattributen und JS (Verwendung JS Klassen setzen statt) und versuchen Sie die JS in externen Dateien mit Event-Handler unaufdringlich stattdessen angewandt werden zu halten der Verwendung der intrinsischen Ereignisattribute)