Question

This might be a really obvious question, I’ve just been stuck on it for a while and can’t find anything on the web. Right now I have the following (extremely simple) html div:

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

In my webapp, I dynamically change the class of the div (between selected and unselected to change the background-color of the div). Is there a way to change the onmouseout backgroundColor to be the default background-color of the class (as defined in the stylesheet)?

In other words, I am looking for something like

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

Is this possible? This seems almost necessary for every site (unless they want to change colors in two places instead of just the stylesheet), yet no guide online seems to address it.

Thanks a lot!

Answer 1

You should use an unobtrusive way, adding & removing a css class:

css:

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

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