使用jquery更改悬停时的背景色

Question

因为我使用可变颜色的按钮，我需要添加内联css。悬停颜色是其他变量。我不能在内联css上添加悬停选择器，所以我必须使用js。我试着用. hover（）来做，但是当我悬停按钮时，两种颜色都消失了。

代码：

$('.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

您应该使用mouseenter和mouseleave事件：

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 );
    });
});

现场演示

更新：事实上，使用悬停事件更好（参考投票结果：

Answer 2

$('.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'）返回一个数组-如果页面上有更多的数组，请使用$（this）

它们都应该是“背景色”或“背景”，确保使用我上次编辑的相同内容

你甚至可能会发疯，把一切都放在一行

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