javascript - 使用 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

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

它们都应该是 "background-color"或 "background"，确保你使用我使它们相同的最后一次编辑

你甚至可以疯狂地将所有内容放在一行中

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