Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переопределение цвета ссылки: переопределяется также и цвет a:hover / 19 сообщений из 19, страница 1 из 1
28.02.2014, 16:55
    #38575512
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Задача следующая:
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, 17:02
    #38575516
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет 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.
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:08
    #38575526
ILLHEAD
ILLHEAD
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Cyrax_02,

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

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

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

Вообще здесь нужно реализовать такую логику:
В начале css (или подключением отдельного css) инициализируем стили всех html-тегов, включая ссылки. Затем в основном тексте css при необходимости переопределяем отдельные свойства. И делаем мы это без всяких important'ов. Так ? Так.
А с ссылками получается бардак: при инициализации свойств ссылок для hover'а приходится ставить important; при переопределении hover'а тоже придётся ставить important. Тогда как при переопределении свойств всех прочих тегов никаких important'ов не требуется.
Напрашивается вариант без этих самых important'ов. Как никак, их назначение несколько иное. А решение сабжевой задачи с их помощью пока больше похоже на заплатку...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.03.2014, 10:41
    #38575930
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
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, 12:58
    #38575960
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Да, так будет работать. Используется правило, в соответствии с которым:
автор Специфика - если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента, а также один уровень важности и один источник, то будет применено правило более конкретного селектора .
Но это опять-таки не вариант. Причины две:
1) Инициализация свойств после определения индивидуальных свойств - это прямое нарушение принципов CSS Reset :
авторСброс стилей после установки ваших собственных стилей для элементов — это неверный подход. В этом случае ничего хорошего от отображения браузером ждать не следует. Запомните, что сначала всегда следует подключать CSS Reset, а потом все остальные стили.
Да, я понимаю, это прозвучало смешно, но это одна из основных ошибок разработчиков от мала до велика. Многие просто об этом забывают.
Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.
2) Если после нашей стандартной таблицы стилей будет подключена другая (пользовательская или ещё какая) с правилом для cont_block a , то чтобы это правило имело силу, необходимо будет добавить important , что приведёт, в свою очередь, к краху Вашего решения: указанное в пользовательской таблице свойство также будет применено и к cont_block a:hover со всеми вытекающими.

Итог: инициализировать свойства ссылок после их индивидуальной ("классовой") настройки - не решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.03.2014, 19:12
    #38576111
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
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
| Ответить | Цитировать | Написать  
02.03.2014, 09:56
    #38576264
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Вариант в лоб, так сказать ?

По сути здесь имеют место 2 проблемы:
1) избыточность CSS-кода со всеми вытекающими
2) необходимость изменения некоторого свойства cont_block a порождает также необходимость указания этого свойства и для cont_block a:hover (иначе будет работать некорректно). Это явный признак ошибки проектирования стилей. Мы должны менять только те стили, которые отличаются от исходных (изначально проинициализированных). И никакого вынужденного дублирования уже описанных выше свойств быть не должно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.03.2014, 10:45
    #38576270
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Код: 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, 11:10
    #38576273
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Красота. Работает.

Осталось объяснить "популярным языком", почему:
а) в случае инициализации a и a:hover дальнейшее переопределение свойства cont_block.a приводит также и к переопределению свойства cont_block.a:hover ?
б) в случае инициализации body a и body a:hover дальнейшее переопределение свойства cont_block.a НЕ приводит к переопределению свойства cont_block.a:hover ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.03.2014, 09:37
    #38576537
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
Решением задачи можно назвать только то решение, которое обладает чёткой и адекватной логикой и эта логика известна и стабильна. Ну а коли нет чёткого объяснения данному поведению, то это решение из разряда "лишь бы работало". Такие вещи в современной вёрстке неприемлемы...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2014, 03:14
    #38577375
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
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:28
    #38577376
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
уточнение:
asws- в случае body a и body a:hover - определение и уточнение относится ко всем ссылкам страницы формально не ко всем, это я неправильно выразился,
a:hover и body a:hover - это разные определения, то-есть чёткие правила в CSS таки-есть.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2014, 03:59
    #38577379
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
не спится блин...

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

a:hover , как и *:hover , формально не относятся к конкретному месту веб-страницы,
поэтому могут слетать у любых элементов любых классов и у вложенных в них, если стили где-то будут переопределены.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.03.2014, 15:06
    #38581208
Cyrax_02
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Переопределение цвета ссылки: переопределяется также и цвет a:hover
авторб) ответ частично дан в пункте "а", подробнее:
у вас различаются определения,
- в случае 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переопределение цвета ссылки: переопределяется также и цвет a:hover / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 699ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447338]:
 0ms
get settings:
 9ms
get forum list:
 10ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 391ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 214ms
total:  699ms
x
x
Закрыть


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