Переопределение CSS для конкретного Div? - PullRequest
Новая
       0

Переопределение CSS для конкретного Div?

5 голосов
/ 15 июля 2010

У меня есть a:hover для всех моих ссылок на моей странице: 

a:hover {
  background-color: blue;
  text-decoration: underline;
  color: black;
}

но есть определенные в div, которые я не хочу, чтобы что-то происходило, когда вы наводите на них курсор, так что я могу сделать что-то подобное? 

#what_we_offer a:hover {
  background-color: none:
  text-decoration: none;
  color: none;
}

в принципе, я не хочу, чтобы это делало что-либо из вышеперечисленного, когда оно наводит на них определенные ссылки.

спасибо

Ответы [ 8 ]

9 голосов
/ 15 июля 2010

Да, это должно работать нормально, хотя вы, вероятно, не хотите устанавливать 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: заканчивалась двоеточием, а не точкой с запятой, поэтому это вызвало бы проблемы.

6 голосов
/ 15 июля 2010 
#what_we_offer a:hover {
  background-color: transparent;
  text-decoration: none;
  color: none;
}

используйте прозрачный вместо ни одного, это работает.

спасибо за все ответы.

3 голосов
/ 15 июля 2010

Вместо использования идентификатора с 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; 
    }
1 голос
/ 16 июля 2010

Когда вы хотите переопределить значения CSS, вы можете сделать две вещи: добавить новые объявления CSS после того, который вы хотите переопределить, или использовать "! Важное" .. Так что для вашей проблемы вы можете попробовать: 

a.reset:hover {
 background-color: #FFFFFF;
 text-decoration: none;
 color: #000000;
}

.. и затем добавьте ссылки, которые вы хотите переопределить в этом новом классе: 

<a href="#" class="reset">Link with reset</a>

Но этот класс CSS должен быть объявлен после обычных объявлений тега "a", иначе это не сработает.

Другой способ - использовать! Важный, но я рекомендую не злоупотреблять этим. Но для переопределения это самый быстрый и безопасный способ убедиться, что он будет работать: 

a.reset:hover {
 background-color: #FFFFFF !important;
 text-decoration: none !important;
 color: #000000 !important;
}

.. и этот, который вы можете добавить в любом месте вашего CSS-файла, и любая ссылка с классом «reset» получит эти стили: белый фон, отсутствие текстового оформления и черный текст.

Да, и для фона вы можете попробовать: background: none; и очистит все стили фона. background-color, background-image и т. д.

В качестве примечания. Идентификаторы используются для ссылки на один элемент, и он должен быть уникальным .., а классы используются для ссылки на несколько элементов. Многократное использование одного и того же идентификатора, как если бы вы использовали класс css. Вы можете заблокировать JavaScript, и он не подтвердит ваш HTML.

0 голосов
/ 15 июля 2010

Вы можете использовать селекторы CSS.Лучшее, что я думаю, вы можете сделать, это использовать селектор not.Позвольте мне показать вам пример: 

<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 будут иметь style, а Тест 2, Тест 4 и Тест 6 будут нормальными, без стиля.

ПРИМЕЧАНИЕ: вы можете определить атрибут, который вы хотите.Вам не нужно называть not_custom.Его можно назвать whatever, если хотите.

0 голосов
/ 15 июля 2010

Я думаю, что если вы сделаете обратное тому, что сказал Пранав, у вас может быть меньше модификаций 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

0 голосов
/ 15 июля 2010 
a:hover { 
  background-color: none: 
  text-decoration: none; 
  color: none; 
}

Это правильно.

Если вы хотите только определенную страницу, добавьте 

body-id a:hover { 
  background-color: none: 
  text-decoration: none; 
  color: none;
}
0 голосов
/ 15 июля 2010

Да, но учтите, что a: hover {} должен предшествовать #what_we_offer a: hover {}.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...