css - 将 bootstraps tr 悬停效果应用于 div

Question

我正在为我的 CSS 主题使用 Bootstrap。主题被编译并保存到数据库中以备后用。这意味着页面只能访问编译后的 css 而不能访问 less 文件。

鉴于此，我如何将 Bootstrap 的 tr:hover 效果应用到各种 div？我需要颜色与为 tr:hover 定义的颜色相同，而且我不能使用 less 变量。

Bootstrap 的风格:

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

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

有什么建议吗？

Answer 1

纯 CSS 方式:

div 有一个类 .hoverDiv 和它的 CSS:

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

fiddle :http://jsfiddle.net/bD5kS/

jQuery 方式:

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

fiddle :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"));
    });
});