使用jQuery更改悬停时的背景颜色

Question

Because I am using variable color for buttons, I need to add it with inline css. The hover color is other variable. I cant add hover selector on inline css so, I must use js. I have try to do it with .hover() but when I hover the button both colors desappear.

The code:

$('.btn').hover( function() {
    var $hover = $('.btn').attr('data-hover');
    $(this).css( "background", $hover );
}, function() {
    var $color = $('.btn').attr('data-color');
    $(this).css( "background", $color );
});

HTML:

<button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>

Answer 1

$('.btn').hover( function() {
    var $hover = $(this).attr('data-hover');   // <-- change to this , there are many .btn
    $(this).css({ "background-color" : $hover });  // minor change
}, function() {
    var $color = $(this).attr('data-color');  // same change
    $(this).css({ "background-color" : $color });  // minor change here
});

$('.btn') is returning an array - if there are more then one on the page , use $(this)

they both should be "background-color" or "background" , make sure you use the last edit where I made them the same

you could even get really crazy and put it all in one line

$(this).css({ "background-color" : $(this).attr('data-hover') });

Answer 2

You should use mouseenter and mouseleave events:

http://api.jquery.com/mouseenter/

HTML

 <button class="btn wpb_btn-small" style="background:#00aff0;" data-color="#00aff0" data-hover="#0cbbfc">Button</button>

JS

$(function() {
    $('.btn').mouseenter(function() {
        var bg = $(this).attr('data-hover');
        $(this).css( "background", bg );
    });

    $('.btn').mouseleave(function() {
        var bg = $(this).attr('data-color');
        $(this).css( "background", bg );
    });
});

Live Demo

UPDATE: It's actually better using Hover event, (refer to the upvoted answer :<)