Как отключить цвет бутстрапа для ссылок

Привет, я использую 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;
}

не является хорошей практикой

Ответы

Ответ 1

Если кто-то заботится, я закончил с:

a {
    color: inherit;
}

Ответ 2

Я бы пошел с чем-то вроде этого 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; }

Ответ 3

a {background-color:transparent !important;}

Ответ 4

Вы можете удалить все правила стиля hover из document.styleSheets.

Просто просмотрите все стили CSS с помощью JavaScript и удалите все правила, которые содержат ": hover" в своем селекторе. Я использую этот метод, когда мне нужно удалить: hover styles из bootstrap 2.

_.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++) {}

Ответ 5

Отметить color: #005580; как color: #005580 !important;.

Он будет переопределять зависание по умолчанию для начальной загрузки.

Ответ 6

Я не эксперт по 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/