web-dev-qa-db-ja.com

リンクのbootstrapホバーカラーを無効にするにはどうすればよいですか

こんにちは、Bootstrapを使用しています。

ブートストラップの定義

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

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

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

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

私はすべてのクラスのホバーをオーバーライドせずに、緑のリンクを緑のままにし、黄色のリンクを黄色のままにしますか？ （この質問は、ブートストラップに依存する必須ではありません）。

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

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

で思うんですけど

.yellow {
    color: yellow !important;
}

良い習慣ではありません

csstwitter-bootstraphref
48
wutzebaer

誰かが気にしたら私は：

a {
    color: inherit;
}
143
wutzebaer

私は this JSFiddle のようなものに行きます：

HTML：

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

CSS：

body  { background: #ccc }
/* Green */
a.green,
a.green:hover { color: green; }
/* Yellow */
a.yellow,
a.yellow:hover { color: yellow; }
11
Mahmoud
a {background-color:transparent !important;}
8
Ritz Mitchell Dacanay

現実のシステムでは絶対にすべきではないいハッキングが好きな場合; document.styleSheetsからすべての：hoverスタイルルールを削除できます。

JavaScriptを使用してすべてのCSSスタイルを調べ、セレクターに「：hover」を含むすべてのルールを削除します。 bootstrap 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++) {}
2
Mikael Lepistö

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

デフォルトのbootstrapホバーをオーバーライドします。

1
Harpreet

私は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/

0
tatlar