jquery - 如何使用悬停事件的计算值更新按钮的背景颜色？

Question

这可能是一个非常愚蠢的问题，但是当悬停在每个按钮上时，我无法找到插入每个按钮的背景颜色的方法。目前它只显示第一个按钮的背景颜色。

HTML：

<button type="submit" class="btn btn-info">Click Me</button>
<button type="submit" class="btn btn-danger">Hello World!</button>
<button type="submit" class="btn btn-primary">Click Other Button</button>
<button type="submit" class="btn btn-success">Last Button</button>

jQuery：

var prop = $("button").css("background-color");

$("button").hover(function(){
    $("button").each(function(){
        $(this).html(prop);
    });
});

演示：http: //jsfiddle.net/52VtD/377/

先感谢您！

Answer 1

你可以这样做，

$("button").hover(function(){
    $("button").css("background-color", "red");    
});

编辑，如果你想将颜色显示为按钮的 html，你可以这样做

现场演示

$("button").hover(function(){
     $(this).html($(this).css("background-color")); 
});

Answer 2

我认为您想要RGB每个按钮使用的特定颜色的值。在这种情况下，您需要为每个按钮找到它，但目前您只为第一个选项获取它，所以试试这个

$("button").hover(function(){
    $("button").each(function(){
        $(this).html($(this).css("background-color"););
    });
});

Js 小提琴演示

Answer 3

我想你想要这个

$("button").hover(function(){
    $(this).html($(this).css("background-color"));
});

例子。

Answer 4

根据您的小提琴，我猜您想查看每个按钮的颜色。但是你只设置prop了一次，所以只看到第一个按钮的颜色。试试this吧。

$("button").hover(function(){
    $("button").each(function(){
        $(this).html($(this).css("background-color"));
    });
});