I've implemented multiple divs with the class .note and applied the following CSS code to them:
.note{
background: #eff9ff;
-webkit-transition: background .5s;
}
.note:hover{
background: #d6e4f2;
}
.note:active{
background: #bfcdda;
}
The webkit animation smoothly changes colors on hover over the div.
In addition, I'm using jQuery to completely alter the background of the div based on the attribute 'selectednote' after it's clicked, reverting back when clicked again. Here's my jQuery script:
$('.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');
}
});
Although everything works as intended, once the div's background has been changed upon clicking, the CSS hover and active effects cease to function.
I've considered eliminating the CSS for those effects entirely. I attempted implementing a jQuery solution for the hovering effect, but encountered difficulties. Here's what I tried:
$('.note').mouseover(function(){
$(this).animate({
background: '#d6e4f2'
},500);
});
What am I missing or doing incorrectly in this situation?