Question

我在这里面对一个非常愚蠢的担忧，但我无法解决它。

当鼠标悬停panel时，我想用与当前面板相关联的颜色更改背景。

这是HTML（使用Bootstrap 3）：

<div class="col-sm-3">
    <div class="panel panel-primary">
        <div class="panel-body">
            <h3 class="text-center">Text</h3>
        </div>
    </div>
</div>

和JS：

$('.panel').mouseenter(function() {
    $(this).css({
        'color' : '#fff',
        'background-color' : $('.panel-primary.border-color') // This makes no sense, but I don't see how to do it
    });
}).mouseleave(function(){
    $(this).css({
        'color' : '#000',
        'background-color' : '#fff'
    });
});

在这种情况下的示例：

css类panel-primary及其颜色为#428bca（在文件bootstrap.css中定义）。因此，我想了解如何在CSS文件中获取此颜色，并能够在上面的代码中直接应用jQuery。

JSFIDDLE

有可能吗？如何实现呢？

Answer 1

jQuery允许您使用.css('property-name')检索任何元素的CSS信息。

$(".panel-primary").css('border-color');

这应该没问题。

如何使用jQuery获取css属性的值

1 个答案: