Переопределяющая CSS для определенного отделения?
у меня есть a a:hover для всех моих ссылок на моей странице:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
но но существуют определенные в отделении, что я не хочу, чтобы что-нибудь произошло, когда Вы нависаете над ними, таким образом, я могу сделать что-то вроде этого?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
в основном я не хочу, чтобы это сделало любое вышеупомянутое, когда это нависает над ними определенные ссылки.
спасибо
8 ответов
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
используйте прозрачный вместо none, это работает.
спасибо за все ответы.
Да, это должно работать нормально, хотя вы, вероятно, не захотите устанавливать none, если вам действительно не нужен никакой стиль... установка ваших базовых цветов и т.д. должна работать нормально.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS Я не уверен, была ли это просто опечатка, но ваша оригинальная строка background-color:none: была завершена двоеточием, а не полутоном, что могло бы вызвать проблемы.
Вместо использования id с css используйте Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
Когда вы хотите переопределить значения CSS, вы можете сделать две вещи: добавить новое CSS объявление после того, которое вы хотите переопределить, или использовать "!important"... Так что для вашей проблемы вы можете попробовать:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
... и затем добавить ссылки, которые вы хотите переопределить этим новым классом:
<a href="#" class="reset">Link with reset</a>
Но этот CSS класс должен быть объявлен после обычных объявлений тега "a", иначе он не будет работать.
Другой способ - использовать !important, но я не рекомендую злоупотреблять этим. Но для переопределения это самый быстрый и безопасный способ быть уверенным, что это будет работать:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
... а этот вы можете добавить в любое место вашего CSS файла и любая ссылка с классом "reset" получит эти стили: белый фон, без оформления текста и черный текст.
О, и для фона вы можете попробовать: background: none; и это очистит все стили фона... background-color, background-image и т.д.
В качестве побочного примечания... id используются для ссылки на один элемент, и он должен быть уникальным... а классы используются для ссылки на несколько элементов. Многократное использование одного и того же id, как и использование класса css... Вы можете тормозить javascript и он не проверит ваш HTML.
Да, но учтите, что: hover {} должен стоять перед #what_we_offer a: hover {}.
Вы можете использовать селекторы CSS. Лучшее, что вы можете сделать, это использовать селектор , а не . Позвольте мне показать вам пример:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
<a href="">Test 1</a>
<a href="" not_custom="">Test 2</a>
<a href="">Test 3</a>
<a href="" not_custom="">Test 4</a>
<a href="">Test 5</a>
<a href="" not_custom="">Test 6</a>
</div>
</body>
</html>
Как видите, я определяю стиль a , используя селектор not . Итак, я говорю, что хочу поставить зеленый фон и красный цвет на все a , у которых нет атрибута not_custom . В результате вы можете видеть, что для тестов 1, 3 и 5 будет определен стиль , а для тестов 2, 4 и 6 будут нормальные, без стиля.
ПРИМЕЧАНИЕ: вы можете определить нужный атрибут. Имя not_custom необязательно. Если хотите, он может называться как угодно .
Я думаю, что если вы сделаете обратное тому, что сказал Пранав, у вас может быть меньше модификаций i, e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
, поэтому вам нужно добавить класс для href s в некоторых конкретных DIV
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
Это правильно.
Если вам нужна только определенная страница, добавьте
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}