Question

I have several divs with the class .note and the following css code for them:

    .note{
            background: #eff9ff;
            -webkit-transition: background .5s;
        }

            .note:hover{
                background: #d6e4f2;
            }

            .note:active{
                background: #bfcdda;
            } 

Due to the webkit animation, it will change colors smoothly after hovering over the div.

However, I also use jQuery to change the background of the div completely depending on the attribute ‘selectednote’ once it is clicked, and only undo that once it is clicked again, like so:

$('.note').click(function(){
if($(this).attr('selectednote')=='no'){
    $(this).attr('selectednote','yes');
    $(this).css('background','#bfcdda');
}else if($(this).attr('selectednote')=='yes'){
    $(this).attr('selectednote','no');
    $(this).css('background','#eff9ff');
}
});

Everything works fine, but as soon as I click the div and it has changed its background, the css hover and active effects don’t work anymore.

Maybe I should get rid of css for that completely? I have tried to come up with the following jQuery for the hovering effect, but to no avail:

$('.note').mouseover(function(){
$(this).animate({
    background: '#d6e4f2'
},500);
});

What am I doing wrong here?

Answer 1

You can stick using CSS for this without using invalid custom attributes like that one.

.note.selected {
  background: #bfcdda;
}​

A simple toggle of the class selected. You can tweak this using .data() also.

$('.note').click(function(){
  $(this).toggleClass("selected");
});​

See it working.