将bootstraps tr悬停效果应用于div

Question

我正在使用Bootstrap作为我的css主题.主题被编译并保存到数据库中以供以后使用.这意味着页面只能访问已编译的css,而不能访问较少的文件.

鉴于此,我如何将Bootstrap的tr:hover效果应用于各种div？我需要颜色与定义的颜色相同tr:hover,我不能使用更少的变量.

Bootstrap的风格:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #f5f5f5;
}

是否可以根据分配给tr？的另一个css元素来定义？有没有办法使用jQuery获取样式？

有什么建议？

Answer 1

纯CSS方式:

为此创建一个divas .hoverDiv和CSS 的类:

.hoverDiv {background: #fff;}
.hoverDiv:hover {background: #f5f5f5;}

小提琴:http://jsfiddle.net/bD5kS/

jQuery方式:

$(document).ready(function(){
    $(".hoverDiv").hover(function(){
        $(this).css("background", "#f5f5f5");
    }, function(){
        $(this).css("background", "#fff");
    });
});

小提琴:http://jsfiddle.net/KQzwc/

要动态获取颜色,请使用$(".table tbody tr:hover").css("background-color"):

$(document).ready(function(){
    $(".hoverDiv").hover(function(){
        $(this).css("background", $(".table tbody tr:hover").css("background-color"));
    }, function(){
        $(this).css("background", $(".table tbody tr").css("background-color"));
    });
});