CSS 将引导程序 tr 悬停效果应用于 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12273420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply bootstraps tr hover effect to a div
提问by rboarman
I am using Bootstrap for my css themes. The themes are compiled and saved into the database for use later on. This means that the pages only have access to the compiled css and not the less files.
我正在为我的 css 主题使用 Bootstrap。主题被编译并保存到数据库中以供以后使用。这意味着页面只能访问已编译的 css 而不能访问 less 文件。
Given that, how can I apply Bootstrap's tr:hovereffect to various divs? I need the color to be the same as what is defined for tr:hoverand I can't use less variables.
鉴于此，如何将 Bootstrap 的tr:hover效果应用于各种 div？我需要颜色与定义的颜色相同，tr:hover并且我不能使用更少的变量。
Bootstrap's style:
Bootstrap 的风格：
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #f5f5f5;
}
Is it possible to define a css element based on another one that is assigned to a tr? Is there a way to grab the style using jQuery?
是否可以根据分配给 a 的另一个元素来定义一个 css 元素tr？有没有办法使用 jQuery 获取样式？
Any suggestions?
有什么建议？
回答by Praveen Kumar Purushothaman
Pure CSS Way:
纯 CSS 方式：
Have a class for the divas .hoverDivand the CSS for this:
为divas.hoverDiv和 CSS 设置一个类：
.hoverDiv {background: #fff;}
.hoverDiv:hover {background: #f5f5f5;}
Fiddle: http://jsfiddle.net/bD5kS/
小提琴：http: //jsfiddle.net/bD5kS/
jQuery Way:
jQuery方式：
$(document).ready(function(){
$(".hoverDiv").hover(function(){
$(this).css("background", "#f5f5f5");
}, function(){
$(this).css("background", "#fff");
});
});
Fiddle: http://jsfiddle.net/KQzwc/
小提琴：http: //jsfiddle.net/KQzwc/
To get the colour dynamically, use $(".table tbody tr:hover").css("background-color"):
要动态获取颜色，请使用$(".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"));
});
});
回答by banzomaikaka
It's not possible - not without javascript.
这是不可能的 - 不是没有 javascript。
Using a less variable would be a good option. But if you can't do that, here's the javascript solution: http://jsfiddle.net/joplomacedo/b5DMA/
使用较少的变量将是一个不错的选择。但如果你不能这样做，这里是 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);
}
}
}?
