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

Привет, я использую Bootstrap.

Bootstrap определяет

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

У меня есть эти ссылки/CSS-классы

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

Как отключить цветной указатель?

Я хочу, чтобы зеленые ссылки оставались зелеными, а желтые желтыми, без переопределения: зависание для каждого отдельного класса? (этот вопрос не является обязательным в зависимости от начальной загрузки).

Мне нужно что-то вроде

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

и я думаю

.yellow {
 color: yellow !important;
}

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

6 ответов

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

a {
 color: inherit;
}


Я бы пошел с чем-то вроде этого JSFiddle:

HTML:

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

CSS

body { background: #ccc }
/* Green */
a.green,
a.green:hover { color: green; }
/* Yellow */
a.yellow,
a.yellow:hover { color: yellow; }


a {background-color:transparent !important;}


Вы можете удалить все правила стиля 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++) {}


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

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


Я не эксперт по Bootstrap, но мне кажется, что вы должны определить новый класс nohover (или что-то подобное), а затем в вашем коде ссылки добавьте класс в качестве последнего значения атрибута:

<a href="#">green text</a>
<a 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/

licensed under cc by-sa 3.0 with attribution.