10

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

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

Bootstrap 的风格:

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

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

有什么建议么?

4

2 回答 2

29

纯 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"));
    });
});
于 2012-09-05T17:25:18.607 回答
0

这是不可能的 - 没有 javascript。

使用较少的变量将是一个不错的选择。但如果你不能这样做,这里是 javascript 解决方案:http: //jsfiddle.net/joplomacedo/b5DMA/

var stylesheets = document.styleSheets,
    stylesheet, new_stylesheet, rules, rule, i = 0,
    max_i = stylesheets.length,
    j, max_j;

for (i = max_i; i--;) {
    stylesheet = stylesheets[i];
    rules = stylesheet.cssRules;
    j = 0;
    max_j = rules.length;

    for (j = max_j; j--;) {
        rule = rules[j];
        if (rule && rule.selectorText.indexOf('.table tbody tr:hover th') > -1) {
            new_stylesheet = document.createElement('style');
            new_stylesheet.innerText = ".el:hover{" + rule.style.cssText + "}";
            document.getElementsByTagName('head')[0].appendChild(new_stylesheet);
        }
    }
}​
于 2012-09-05T01:59:24.577 回答