10

CSSテーマにBootstrapを使用しています。テーマはコンパイルされ、後で使用するためにデータベースに保存されます。これは、ページがコンパイル済みの css にのみアクセスでき、少ないファイルにはアクセスできないことを意味します。

tr:hoverそれを考えると、Bootstrap の効果をさまざまな divに適用するにはどうすればよいですか? 色が定義されているものと同じである必要があり、tr:hover使用する変数が少なくありません。

ブートストラップのスタイル:

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

に割り当てられた別の要素に基づいて 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 に答える