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

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

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

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

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 7 часов назад
- 48 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 17 часов назад
- 88 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 73 просмотра
0

ответов
CSS

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

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 102 просмотра
0

ответов
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- 17 дек.
- 57 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- 17 дек.
- 171 просмотр
1

ответ
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- 17 дек.
- 268 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

1000 руб./за проект

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Потому что для него стилей при наведении не было прописано.
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 не применяется к заголовку с цветом?

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

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

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