ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переопределение цвета ссылки: переопределяется также и цвет a:hover
19 сообщений из 19, страница 1 из 1
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575512
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Задача следующая:
1. В начале css определяется стиль для ссылок a и для a:hover
2. Далее в тексте css для некоторых ссылок нужно переопределить цвет, оставив при этом цвет a:hover

Проблема в том, что при переопределении цвета ссылки переопределяется также и цвет a:hover . Как этого избежать ?

Вот пример:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>
#wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
.cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }
a { color: black; }
a:hover { color: blue; }

<!-- переопределяем цвет ссылки -->
.cont_block a { color: red; }
</style>

</head>
<body>
<div id="wrapper">
  <div class='cont_block'>
    <a href="/">ссылка</a>
  </div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.02.2014, 16:55
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575516
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
    #wrapper {
      width: 750px;
      margin: 0 auto;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
      
    .cont_block {
      position:relative;
      border:1px solid #919192;
      border-radius:10px;
      background:#ddd;
      padding:0px;
      margin-bottom:15px;
    }
      
    a {
      color: black;
    }      
    a:hover {
      color: blue !important;
    }
      
    /* переопределяем цвет ссылки */
    .cont_block a { color: red; }
  </style>
</head>  
<body>
  <div id="wrapper">
    <div class='cont_block'><a href="/">ссылка</a></div>
  </div>
</body>
</html>


P.S.: почему возник вопрос, Вы же используете !important ?
...
Рейтинг: 0 / 0
28.02.2014, 17:02
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575526
ILLHEAD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ILLHEAD
Участник
Cyrax_02,

ховер остается красным. проверил в 3х браузерах
...
Рейтинг: 0 / 0
28.02.2014, 17:08
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575527
ILLHEAD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ILLHEAD
Участник
ILLHEADCyrax_02,

ховер остается красным. проверил в 3х браузерахтю! синим )
...
Рейтинг: 0 / 0
28.02.2014, 17:09
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575548
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
ILLHEAD, у него комментарии в CSS не валидные, из-за этого у тебя стиль переопределённый не применяется.
...
Рейтинг: 0 / 0
28.02.2014, 17:24
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575551
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Или это такой троллинг кривовго оформления кода?
...
Рейтинг: 0 / 0
28.02.2014, 17:24
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575565
ILLHEAD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ILLHEAD
Участник
skyANA,

точно. где были мои фары!
...
Рейтинг: 0 / 0
28.02.2014, 17:42
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575927
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
important поставить можно. Только это не есть хорошо. Поскольку при необходимости переопределения a:hover'а тоже придётся ставить important.

Вообще здесь нужно реализовать такую логику:
В начале css (или подключением отдельного css) инициализируем стили всех html-тегов, включая ссылки. Затем в основном тексте css при необходимости переопределяем отдельные свойства. И делаем мы это без всяких important'ов. Так ? Так.
А с ссылками получается бардак: при инициализации свойств ссылок для hover'а приходится ставить important; при переопределении hover'а тоже придётся ставить important. Тогда как при переопределении свойств всех прочих тегов никаких important'ов не требуется.
Напрашивается вариант без этих самых important'ов. Как никак, их назначение несколько иное. А решение сабжевой задачи с их помощью пока больше похоже на заплатку...
...
Рейтинг: 0 / 0
01.03.2014, 10:12
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575930
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Cyrax_02, не вопрос:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
    #wrapper {
      width: 750px;
      margin: 0 auto;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
      
    .cont_block {
      position:relative;
      border:1px solid #919192;
      border-radius:10px;
      background:#ddd;
      padding:0px;
      margin-bottom:15px;
    }
      
    .cont_block a { color: red; }
      
    a {
      color: black;
    }
    
    a:hover {
      color: blue;
    }
  </style>
</head>  
<body>
  <div id="wrapper">
    <h1><a href="/">Ла ла ла</a></h1>
    <div class='cont_block'><a href="/">Ту ту ту</a></div>
  </div>
</body>
</html>


P.S.: мне бы Ваши проблемы
...
Рейтинг: 0 / 0
01.03.2014, 10:41
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38575960
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Да, так будет работать. Используется правило, в соответствии с которым:
автор Специфика - если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента, а также один уровень важности и один источник, то будет применено правило более конкретного селектора .
Но это опять-таки не вариант. Причины две:
1) Инициализация свойств после определения индивидуальных свойств - это прямое нарушение принципов CSS Reset :
авторСброс стилей после установки ваших собственных стилей для элементов — это неверный подход. В этом случае ничего хорошего от отображения браузером ждать не следует. Запомните, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.
Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.
Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.
2) Если после нашей стандартной таблицы стилей будет подключена другая (пользовательская или ещё какая) с правилом для cont_block a , то чтобы это правило имело силу, необходимо будет добавить important , что приведёт, в свою очередь, к краху Вашего решения: указанное в пользовательской таблице свойство также будет применено и к cont_block a:hover со всеми вытекающими.

Итог: инициализировать свойства ссылок после их индивидуальной ("классовой") настройки - не решение.
...
Рейтинг: 0 / 0
01.03.2014, 12:58
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38576111
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Cyrax_02, ну вот Вы оказывается сами всё знаете, а решение выбрать не можете. Как так?

P.S.: с нетерпением жду комментариев к последнему варианту:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>      
    a {
      color: black;
    }
    
    a:hover {
      color: blue;
    }
    
    #wrapper {
      width: 750px;
      margin: 0 auto;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
      
    .cont_block {
      position:relative;
      border:1px solid #919192;
      border-radius:10px;
      background:#ddd;
      padding:0px;
      margin-bottom:15px;
    }
      
    .cont_block a { color: red; }    
    .cont_block a:hover { color: blue; }
  </style>
</head>  
<body>
  <div id="wrapper">
    <h1>
      <a href="/">Ла ла ла</a>
    </h1>
    <div class='cont_block'>
      <a href="/">Ту ту ту</a>
    </div>
  </div>
</body>
</html>
...
Рейтинг: 0 / 0
01.03.2014, 19:12
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38576264
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Вариант в лоб, так сказать ?

По сути здесь имеют место 2 проблемы:
1) избыточность CSS-кода со всеми вытекающими
2) необходимость изменения некоторого свойства cont_block a порождает также необходимость указания этого свойства и для cont_block a:hover (иначе будет работать некорректно). Это явный признак ошибки проектирования стилей. Мы должны менять только те стили, которые отличаются от исходных (изначально проинициализированных). И никакого вынужденного дублирования уже описанных выше свойств быть не должно.
...
Рейтинг: 0 / 0
02.03.2014, 09:56
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38576270
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
body a {
  color: black;
}
    
body a:hover {
  color: red;
}
	
.cont_block a {
  color: green;
}
...
Рейтинг: 0 / 0
02.03.2014, 10:45
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38576273
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Красота. Работает.

Осталось объяснить "популярным языком", почему:
а) в случае инициализации a и a:hover дальнейшее переопределение свойства cont_block.a приводит также и к переопределению свойства cont_block.a:hover ?
б) в случае инициализации body a и body a:hover дальнейшее переопределение свойства cont_block.a НЕ приводит к переопределению свойства cont_block.a:hover ?
...
Рейтинг: 0 / 0
02.03.2014, 11:10
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38576537
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Решением задачи можно назвать только то решение, которое обладает чёткой и адекватной логикой и эта логика известна и стабильна. Ну а коли нет чёткого объяснения данному поведению, то это решение из разряда "лишь бы работало". Такие вещи в современной вёрстке неприемлемы...
...
Рейтинг: 0 / 0
03.03.2014, 09:37
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38577375
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
Cyrax_02Красота. Работает.

Осталось объяснить "популярным языком", почему:
а) в случае инициализации a и a:hover дальнейшее переопределение свойства cont_block.a приводит также и к переопределению свойства cont_block.a:hover ?
б) в случае инициализации body a и body a:hover дальнейшее переопределение свойства cont_block.a НЕ приводит к переопределению свойства cont_block.a:hover ?
а) последнее определение заменяет все такие-же предыдущие, а hover - это псевдокласс, он уточняет действие класса,
например, если вы укажете в коде <a style="color:#000000">...</a> то все псевдоклассы :hover, которые уточняют цвет, тут-же слетят.

б) ответ частично дан в пункте "а", подробнее:
у вас различаются определения,
- в случае body a и body a:hover - определение и уточнение относится ко всем ссылкам страницы,
- в случае cont_block a - это определение не затрагивает body a , потому что относится только к ссылкам внутри элементов класса cont_block ,
следовательно, после стого, как слетит псевдокласс cont_block a:hover , будет продолжать работать псевдокласс body a:hover для ссылок внутри cont_block

Это-же логично, или вы вместо того, чтобы подумать, хотите собственные правила ввести?
...
Рейтинг: 0 / 0
04.03.2014, 03:14
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38577376
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
уточнение:
asws- в случае body a и body a:hover - определение и уточнение относится ко всем ссылкам страницы формально не ко всем, это я неправильно выразился,
a:hover и body a:hover - это разные определения, то-есть чёткие правила в CSS таки-есть.
...
Рейтинг: 0 / 0
04.03.2014, 03:28
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38577379
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
не спится блин...

ничего не мешает дать бессмысленное определение head a ,
это вполне по-правилам, потому что указаны правильные теги, даже w3c-валидатор не ругается.

a:hover , как и *:hover , формально не относятся к конкретному месту веб-страницы,
поэтому могут слетать у любых элементов любых классов и у вложенных в них, если стили где-то будут переопределены.
...
Рейтинг: 0 / 0
04.03.2014, 03:59
| Ответить | Цитировать | Написать  
Переопределение цвета ссылки: переопределяется также и цвет a:hover
    #38581208
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторб) ответ частично дан в пункте "а", подробнее:
у вас различаются определения,
- в случае body a и body a:hover- определение и уточнение относится ко всем ссылкам страницы,
- в случае cont_block a - это определение не затрагивает body a, потому что относится только к ссылкам внутри элементов класса cont_block,
следовательно, после стого, как слетит псевдокласс cont_block a:hover, будет продолжать работать псевдокласс body a:hover для ссылок внутри cont_block
1. В случае body a и body a:hover - определение и уточнение относятся только к ссылкам, расположенным внутри тега body. css-парсер не различает семантику тегов, только синтаксис (максимум, "синтаксическую семантику"). Вместо body может стоять тег table или любой другой. Логика, в соответствии с которой работает парсер, не должна отличаться для первого и второго случаев. И не отличается, так ?

2. Псевдокласс :hover никогда не слетает. Он может быть только определён или переопределён (явно или неявно). Когда мы переопределяем ссылку ( a ), автоматически и неявно переопределяется и псевдокласс a:hover .

И когда мы, проинициализировав a и a:hover , переопределяем ссылку через класс cont_block a , то может произойти одно из следующих действий:
а) псевдокласс cont_block a:hover автоматически и неявно переопределяется тем же правилом, которое установлено для cont_block a ;
б) псевдокласс cont_block a:hover НЕ переопределяется
Опытным путём мы выяснили, что при начальной инициализации ссылки через body a / body a:hover наблюдается ситуация, описанная в п. б , при начальной инициализации ссылки через a / a:hover наблюдается ситуация, описанная в п. а .
...
Рейтинг: 0 / 0
07.03.2014, 15:06
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переопределение цвета ссылки: переопределяется также и цвет a:hover
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38575527&tid=1447338]:
 0ms
get settings:
 7ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 62ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 72ms
get tp. blocked users:
 2ms
others: 201ms
total:  383ms
созд. / загр.: 383ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]