Почему 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

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

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 Автор вопроса

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

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

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

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

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

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

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

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

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

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

HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 308 просмотров
1

ответ
CSS

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

ответа
HTML

+1 ещё

Простой
Шрифт подключен, браузер определяет шрифт правильно, но отображение отличается довольно сильно. Что делать?
- 3 подписчика
- 18 мар.
- 296 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как сделать слайдер как на сайте apple.com?
- 3 подписчика
- 17 мар.
- 613 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Почему не получается изменить размер изображений?
- 1 подписчик
- 16 мар.
- 248 просмотров
2

ответа
CSS

Простой
Как в CSS указать цвет родителю только если дочек 5?
- 1 подписчик
- 13 мар.
- 264 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему не получается собрать сайт на Hugo?
- 1 подписчик
- 02 мар.
- 289 просмотров
1

ответ
HTML

+1 ещё

Средний
Как заставить элемент определять свою высоту по содержимому?
- 2 подписчика
- 26 февр.
- 375 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как нарисовать нестандартную фигуру?
- 1 подписчик
- 13 февр.
- 352 просмотра
2

ответа
CSS

Средний
Как учитывать диагональ при вёрстке?
- 2 подписчика
- 26 янв.
- 346 просмотров
3

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

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Специалист тех поддержки (английский язык, смены с 16:00 до 00:00 Мск)

ТехСофт

от 50 000 ₽

Frontend Engineer

Atlantis

от 125 000 до 200 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 не применяется к заголовку с цветом?

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

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

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