Почему hover не применяется к заголовку с цветом?

Question

Анатолий @Tolly

CSS

Почему hover не применяется к заголовку с цветом?

Почему при наведении заголовок не изменяет цвет?

Код примера

<!DOCTYPE html>
<html lang="en">
<head>
	<style>a:hover {color:lime;}	h2 {color:green;}	</style>
</head>
<body>
	<a href="#">11111111111<h2>22222222</h2></a>
</body>
</html>

codepen.io

Вопрос задан более трёх лет назад
358 просмотров

35 комментариев

Подписаться 1 Простой 35 комментариев

Алексей @skazi_premiere
Потому что для него стилей при наведении не было прописано.
h2 {color:yellow;} a:hover {color:lime;} a:hover > h2 {color:red;}
Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

а почему тогда применяются, когда убрать color для заголовка?

PS. У меня например в теге "a" много чего есть, и стили не применяется ни к чему!

Зачем мне прописывать дополнительные стили, почему сразу не работает, но работает, если стили не заданы. Я понимаю, что если, к примеру, указать h2:hover, то тогда понятно почему a:hover не работает, а вот тут я не совсем понимаю.

Написано более трёх лет назад
Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Потому что наследование.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Анатолий, потому что наследуются
htmlbook.ru/samcss/kaskadirovanie

Написано более трёх лет назад
Алексей @skazi_premiere

Анатолий, вот я понял что ошибся и поправил свой ответ, что бы показать что цвет можно изменить в любом случае, а ссылочку почему уже дали.

Написано более трёх лет назад
leni_m @leni_m

при ховере получается нет наследования?

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

color:lime !important; проверьте, не работает!

Есть ли решение, чтобы задав a:hover я мог повлиять на стили всех элементов в нем?

Написано более трёх лет назад
RAX7 @RAX7

Анатолий, h2 {color: inherit}

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

RAX7, h2 у меня имеет конкретный цвет, допустим темно-синий, а при наведении оранжевый.

PS. Аналогично, можно добавить в стили span {color:green;} и т.д. При a:hover тоже не меняется. В итоге, чтобы мне применить стиль ко всем элементам, мне надо их все перечислять, что мне не удобно.

Написано более трёх лет назад
zoozag @zoozag

Анатолий, a:hover * {color: inherit}

Написано более трёх лет назад
RAX7 @RAX7
Анатолий, тогда только так
a:hover h2 { color: orange; }
Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Анатолий,
a:hover * {color: inherit}
так писать плохо
лучше перечислить конкретные классы (лучше) или теги (похуже)

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

zoozag, уже лучше, почти решение, осталось только дело за малым, без теговое содержимое не меняет цвет, т.е.:
<a href="#">11111111111<h2>22222222</h2></a>
11111111 - не изменит цвет

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

RAX7, элементов много, хочется решение, а это я и сейчас использую.
возможно, только:
a:hover *, a:hover

может, кто еще что-то дельное скажет

Написано более трёх лет назад
zoozag @zoozag

Анатолий, Как оно может не менять цвет, если вы его напрямую задаете.

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

zoozag, Вы же имеете ввиду:
a:hover {color:lime;} a:hover * {color:inherit;}
это 2 стиля

Написано более трёх лет назад
zoozag @zoozag

Ankhena, Понятно, что плохо, но есть условие:
В итоге, чтобы мне применить стиль ко всем элементам, мне надо их все перечислять, что мне не удобно.

Написано более трёх лет назад
zoozag @zoozag

Анатолий, И в чем проблема?

Написано более трёх лет назад
RAX7 @RAX7
Анатолий, свойства либо наследуются от родителя либо задаются явно, если ты задал явно, то оно больше не наследуется от родителя. Представь у тебя есть:
html { color: red } h2 { color: blue }

какого цвета будет h2?
Если ты написал a:hover {color:lime;}, это не значит что h2 {color:green;} будут наследовать color от a или a:hover
Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

zoozag, проблем нет, жду еще варианты. И может все таки кто-то ответит на основной вопрос, почему? )

RAX7, все верно, они либо наследуются, например задав цвет текста для контейнера, внутренние элементы получат точно такой цвет. Есть те, что задаются явно.
Но по моему вопросу, это не то и не то.
Существует цвет заданный по умолчанию, например тем же браузером, тогда почему я могу менять его через a:hover? Вот в этом и есть весь вопрос.
Почему если браузер задает цвет это не считается, а когда пользователь - считается.

Задавали ли подобные вопросы разработчикам браузеров, и есть ли что-то конкретное в самом стандарте html5 (хоть 5.2)?

"какого цвета будет h2?" вопрос не корректный! мы говорим не о конкретно h2, а о состоянии hover для h2, и какой должен быть hover? blue? почему он не меняет цвет?!
Почему наследование от a:hover даже с important не применяются? Почему если цвет h2 не задавать, то наследование применяется? Почему двойные стандарты? :)

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

Ankhena, в настоящее время через классы и задаю, но начал мучать вопрос почему так :)

А еще лучше через id, тогда cpu совсем халява будет :)

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Анатолий, все ответы на почему, в статье по ссылке выше

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

Ankhena, Вы про статью по Вашей ссылке?
Ну тыкните, пожалуйста, где там ответ.

Написано более трёх лет назад
zoozag @zoozag

Анатолий,
Почему наследование от a:hover даже с important не применяются?

Потому что у вас important задан для свойства ссылки, а не для h2 и т.д.

Почему если цвет h2 не задавать, то наследование применяется?

Потому что стандартное свойство color: inherit. Когда вы задаете цвет, вы его отменяете.
Никаких двойных стандартов нет.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Анатолий, проявите сообразительность, загляните в оглавление, там не одна статья. Мало информации в одной статье, вектор гугления вам дан.

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

zoozag, пишите в ответ, отмечу решением.

Написано более трёх лет назад
RAX7 @RAX7
Анатолий,
Существует цвет заданный по умолчанию, например тем же браузером, тогда почему я могу менять его через a:hover? Вот в этом и есть весь вопрос.

ну смотри, например для ссылки браузер задает:
a:-webkit-any-link { color: -webkit-link; }

ты задаешь:
a:hover { color: red; }

селекторы имеют одинаковую специфичность, но твое правило объявлено позже, поэтому сработает твой селектор, а не браузера.

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

А теперь смотри ссылка внутри ссылки (wtf?!), попробуй задай для ссылки цвет явно или оставить как задает браузер, поведение для них одинаковое.

Почему наследование от a:hover даже с important не применяются?

Наследовать или не наследовать определяет дочерний элемент, а не родительский.

Почему если цвет h2 не задавать, то наследование применяется?

Потому что так работает наследование.
Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

RAX7, да мне уже выше это объяснили.

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса
Еще вопрос в догонку, а если все так плохо, то как решить:
<style> h2 {color: blue;} a:hover, .title:hover, .link:hover {color:green;} </style> <a href="#"> <h2 class='title'>Header</h2> <span class='link'>www.www.www</span> </a>

чтобы при наведении на ссылку отмечались оба элемента
Написано более трёх лет назад
Eugene Chefranov @Chefranov
Анатолий,
h2 {color: blue;} a:hover .title, a:hover .link {color:green;}
Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

Eugene Chefranov, это не работает!

Написано более трёх лет назад
Eugene Chefranov @Chefranov

Анатолий, всё прекрасно работает. или я задачу неправильно понял?

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

Eugene Chefranov, https://codepen.io/workcode/pen/xQmJEv
у меня не работает!

Написано более трёх лет назад
Eugene Chefranov @Chefranov

Анатолий, вы неправильно скопировали мои стили, смотрите внимательней. Вы hover повесили на все подряд

Написано более трёх лет назад
Анатолий @Tolly Автор вопроса

Ага, я свои просто стили скопировал )

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 120 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 134 просмотра
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 146 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 129 просмотров
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 96 просмотров
1

ответ
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 117 просмотров
1

ответ
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 166 просмотров
2

ответа
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 316 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 182 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 243 просмотра
3

ответа
Показать ещё Загружается…

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Потому что для него стилей при наведении не было прописано.
h2 {color:yellow;} a:hover {color:lime;} a:hover > h2 {color:red;}
а почему тогда применяются, когда убрать color для заголовка?

PS. У меня например в теге "a" много чего есть, и стили не применяется ни к чему!

Зачем мне прописывать дополнительные стили, почему сразу не работает, но работает, если стили не заданы. Я понимаю, что если, к примеру, указать h2:hover, то тогда понятно почему a:hover не работает, а вот тут я не совсем понимаю.
Анатолий, потому что наследуются
htmlbook.ru/samcss/kaskadirovanie
Анатолий, вот я понял что ошибся и поправил свой ответ, что бы показать что цвет можно изменить в любом случае, а ссылочку почему уже дали.
при ховере получается нет наследования?
color:lime !important; проверьте, не работает!

Есть ли решение, чтобы задав a:hover я мог повлиять на стили всех элементов в нем?
RAX7, h2 у меня имеет конкретный цвет, допустим темно-синий, а при наведении оранжевый.

PS. Аналогично, можно добавить в стили span {color:green;} и т.д. При a:hover тоже не меняется. В итоге, чтобы мне применить стиль ко всем элементам, мне надо их все перечислять, что мне не удобно.
Анатолий, тогда только так
a:hover h2 { color: orange; }
Анатолий,
a:hover * {color: inherit}
так писать плохо
лучше перечислить конкретные классы (лучше) или теги (похуже)
zoozag, уже лучше, почти решение, осталось только дело за малым, без теговое содержимое не меняет цвет, т.е.:
<a href="#">11111111111<h2>22222222</h2></a>
11111111 - не изменит цвет
RAX7, элементов много, хочется решение, а это я и сейчас использую.
возможно, только:
a:hover *, a:hover

может, кто еще что-то дельное скажет
Анатолий, Как оно может не менять цвет, если вы его напрямую задаете.
zoozag, Вы же имеете ввиду:
a:hover {color:lime;} a:hover * {color:inherit;}
это 2 стиля
Ankhena, Понятно, что плохо, но есть условие:
В итоге, чтобы мне применить стиль ко всем элементам, мне надо их все перечислять, что мне не удобно.
Анатолий, свойства либо наследуются от родителя либо задаются явно, если ты задал явно, то оно больше не наследуется от родителя. Представь у тебя есть:
html { color: red } h2 { color: blue }

какого цвета будет h2?
Если ты написал a:hover {color:lime;}, это не значит что h2 {color:green;} будут наследовать color от a или a:hover
zoozag, проблем нет, жду еще варианты. И может все таки кто-то ответит на основной вопрос, почему? )

RAX7, все верно, они либо наследуются, например задав цвет текста для контейнера, внутренние элементы получат точно такой цвет. Есть те, что задаются явно.
Но по моему вопросу, это не то и не то.
Существует цвет заданный по умолчанию, например тем же браузером, тогда почему я могу менять его через a:hover? Вот в этом и есть весь вопрос.
Почему если браузер задает цвет это не считается, а когда пользователь - считается.

Задавали ли подобные вопросы разработчикам браузеров, и есть ли что-то конкретное в самом стандарте html5 (хоть 5.2)?

"какого цвета будет h2?" вопрос не корректный! мы говорим не о конкретно h2, а о состоянии hover для h2, и какой должен быть hover? blue? почему он не меняет цвет?!
Почему наследование от a:hover даже с important не применяются? Почему если цвет h2 не задавать, то наследование применяется? Почему двойные стандарты? :)
Ankhena, в настоящее время через классы и задаю, но начал мучать вопрос почему так :)

А еще лучше через id, тогда cpu совсем халява будет :)
Анатолий, все ответы на почему, в статье по ссылке выше
Ankhena, Вы про статью по Вашей ссылке?
Ну тыкните, пожалуйста, где там ответ.
Анатолий,
Почему наследование от a:hover даже с important не применяются?

Потому что у вас important задан для свойства ссылки, а не для h2 и т.д.

Почему если цвет h2 не задавать, то наследование применяется?

Потому что стандартное свойство color: inherit. Когда вы задаете цвет, вы его отменяете.
Никаких двойных стандартов нет.
Анатолий, проявите сообразительность, загляните в оглавление, там не одна статья. Мало информации в одной статье, вектор гугления вам дан.
zoozag, пишите в ответ, отмечу решением.
Анатолий,
Существует цвет заданный по умолчанию, например тем же браузером, тогда почему я могу менять его через a:hover? Вот в этом и есть весь вопрос.

ну смотри, например для ссылки браузер задает:
a:-webkit-any-link { color: -webkit-link; }

ты задаешь:
a:hover { color: red; }

селекторы имеют одинаковую специфичность, но твое правило объявлено позже, поэтому сработает твой селектор, а не браузера.

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

А теперь смотри ссылка внутри ссылки (wtf?!), попробуй задай для ссылки цвет явно или оставить как задает браузер, поведение для них одинаковое.

Почему наследование от a:hover даже с important не применяются?

Наследовать или не наследовать определяет дочерний элемент, а не родительский.

Почему если цвет h2 не задавать, то наследование применяется?

Потому что так работает наследование.
RAX7, да мне уже выше это объяснили.
Еще вопрос в догонку, а если все так плохо, то как решить:
<style> h2 {color: blue;} a:hover, .title:hover, .link:hover {color:green;} </style> <a href="#"> <h2 class='title'>Header</h2> <span class='link'>www.www.www</span> </a>

чтобы при наведении на ссылку отмечались оба элемента
Анатолий,
h2 {color: blue;} a:hover .title, a:hover .link {color:green;}
Анатолий, всё прекрасно работает. или я задачу неправильно понял?
Eugene Chefranov, https://codepen.io/workcode/pen/xQmJEv
у меня не работает!
Анатолий, вы неправильно скопировали мои стили, смотрите внимательней. Вы hover повесили на все подряд
Ага, я свои просто стили скопировал )

Answer 1 · 2018-12-06 11:43:12

Fwwll @adrontek

<style>a:hover, a:hover h2 {color:lime;}	h2 {color:green;}	</style>

Ответ написан более трёх лет назад

Комментировать

Почему hover не применяется к заголовку с цветом?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт