Псевдокласс hover – мой самый любимый. Этот замечательный класс позволяет применять стили к элементам, наводя на них мышку. Возможно, вы пока не видите, какие за этим стоят преимущества, но я попытаюсь сразу же объяснить на примере.
Псевдокласс hover и его польза в веб-разработке
Делаете вы у себя на сайте стилизацию для ссылок. Допустим, они у вас зеленые и с подчеркиванием. Для этого нужно прописать примерно такие правила:
A{
Color: green;
Text-decoration: none
}
Соответственно, все ссылки станут зелеными и с подчеркиванием кроме тех, которые определены более конкретными селекторами. При наведении на одну такую ссылку ничего не произойдет, потому что вы пока не прописали для этого абсолютно никаких правил. Давайте исправим положение:
A:hover{
Text-decoration: underline
}
Этим свойством мы добавили нижнее подчеркивание к ссылке. Они будет появляться только тогда, когда вы наводите на нее курсор. Как вы понимаете, задать стили при наведении можно для любых элементов: абзацев, таблиц, блоков и даже одной буковки.
Ну как, представили себе все великолепие псевдокласса hover? Вы сможете перекрасить элементы, изменять их размеры, наклон и вообще все, что захотите. А в сочетании с плавными переходами это даст красивые преобразования.
Технология CSS3 значительно разнообразила работу с этим псевдоклассом. В сочетании с трансформациями, плавными переходами и фильтрами, можно делать очень красивые эффекты и в некоторых случаях обходиться без помощи JavaScript.
В ближайшее время я напишу несколько статей, в которых будет активно применен этот класс, чтобы вы могли увидеть его действие на практике. Если интересно, то подписывайтесь и следите за обновлениями.
Здравствуйте!
Прошу небольшой помощи в ответе на один вопрос по a:hover
У меня на главной странице a:hover применяется абсолютно
ко всем линкам, но можно ли выделить линки на которые
a:hover распространяться не должен?
Пробовал по всякому — не получается.
Всего наилучшего!