57

ブートストラップを使用しています。

ブートストラップ定義

a:hover, a:focus {
    color: #005580;
    text-decoration: underline;
}

私はこのリンク/ CSSクラスを持っています

<a class="green" href="#">green text</a>
<a class="yellow" href="#">yellow text</a>

フーバーの色を無効にするにはどうすればよいですか?

すべてのクラスの :hover をオーバーライドせずに、緑色のリンクを緑色のままにし、黄色のリンクを黄色のままにしたいですか? (この質問は、ブートストラップに依存する必須ではありません)。

次のようなものが必要です

a:hover, a:focus {
    color: @nonhoovercolor;
}

で思うんですけど

.yellow {
    color: yellow !important;
}

良い習慣ではありません。

4

9 に答える 9

2

現実世界のシステムでは絶対にやってはいけない醜いハックが好きなら; document.styleSheets からすべての :hover スタイル ルールを取り除くことができます。

JavaScript を使用してすべての CSS スタイルを確認し、セレクターに「:hover」を含むすべてのルールを削除します。ブートストラップ 2 から :hover スタイルを削除する必要があるときに、このメソッドを使用します。

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

配列を反復するためにアンダースコアを使用しましたが、純粋な js ループを使用してそれらを記述することもできます。

for (var i = 0; i < document.styleSheets.length; i++) {}
于 2013-11-05T10:56:23.493 に答える
1

としてマークcolor: #005580;しcolor: #005580 !important;ます。

デフォルトのブートストラップ ホバーをオーバーライドします。

于 2013-04-18T13:25:33.420 に答える
1

私は Bootstrap の専門家ではありませんが、nohoverという名前の新しいクラス(または同等のもの) を定義し、リンク コードで最後の属性値としてクラスを追加する必要があるように思えます。

<a class="green nohover" href="#">green text</a>
<a class="yellow nohover" href="#">yellow text</a>

次に、Bootstrap LESS/CSS ファイルで、nohoverを定義します(上記の JSFiddle の例を使用)。

a:hover { color: red  }
/* Green */
a.green  { color: green; }
/* Yellow */
a.yellow  { color: yellow; }
a.nohover:hover { color: none;  }

ここで JSFiddle をフォークしました: http://jsfiddle.net/9rpkq/

于 2013-07-17T18:46:54.330 に答える