我的css主题使用Bootstrap。主题被编译并保存到数据库中以备日后使用。这意味着页面只能访问编译后的css,而不能访问较少的文件。
既然如此,我如何将Bootstrap的tr:hover
效应应用于各种div?我需要颜色与为tr:hover
定义的颜色相同,并且我不能使用更少的变量。
Bootstrap的风格:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #f5f5f5;
}
是否可以基于分配给tr
的另一个css元素来定义css元素?有没有一种方法可以使用jQuery获取样式?
有什么建议吗?
纯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"));
});
});
这是不可能的-没有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);
}
}
}