CSS HOVER изменении свойств одного элемента при наведении курсора на другой. Псевдоклассы

В последующих нескольких абзацах я хочу подробнее рассмотреть селектор обобщенных родственных элементов (или ~) и область его возможного применения.
На написание данной статьи меня натолкнула малая распространённость информации о нём.

Что это такое?

Основная задача селектора обобщённых родственных элементов - выбор элемента (-ов), идущего после заданного элемента, и имеющего с ним общего родителя.
Обозначается всё это вот так:
A~B {style} , где A и B - строковые значения, определяющие селектор. style - применяемые свойства.
Пример
HTML:

Заголовок

Подзаголовок 1

Это абзац с текстом

Подзаголовок 2

Это текст, обрамлённый в span

CSS:
h1~h2 { color:red; }
В результате в красный цвет окрасятся заголовки h2, т.к. у них общий родительский элемент с заголовком h1, и в коде они стоят после него.

Если же элемент будет стоять выше исходного, то он не будет выбран.

Следует запомнить, что выбираются только элементы, которые имеют общего родителя с исходным, а не те, которые всего-лишь имеют общего предка. Это хорошо иллюстрирует второй пример.

Пример

Заголовок

Подзаголовок 1

Это абзац с текстом

Подзаголовок 2

Это второй абзац с текстом Это текст, обрамлённый в span, который находится внутри абзаца

В результате ничего не выделится красным, т.к. родитель элемента span - p, а элемента h1 - article.
Для того чтобы span стал красным, необходимо либо вынести его из абзаца на один уровень с h1, либо сделать так:

Использование вместе с:hover

На мой взгляд, всю свою полезность селектор “A~B” проявляет в связке с событиями элементов, такими как:hover, :focus и др.
Если раньше можно было менять стиль элемента только при наведении указателя мыши на него самого, то использование селектора обобщенных родственных элементов позволяет поменять стиль элемента, отличного от того, на котором произошло событие.

Символически (в случае с:hover) это выглядит так:
A:hover ~ B{style} , где A - элемент, на который наведён указатель мыши, а на B распространяются новые стилевые правила.

Пример

HTML:
Наведи указатель на эту надпись и блоки станут зёлёными

Блок №1

Блок №2

Div{ width:100px; height:50px; margin:5px; background:gray; } span:hover~div{ background:green; }

В результате, блоки станут зелёного цвета, при наведении на надпись.

Покрасить Блок №2 в зелёный цвет
Покрасить Блок №1 в синий цвет

Блок №1

Блок №2

CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .span1:hover~.block2{ background:green; } .span2:hover~.block1{ background:blue; }

Можно применять вот так:
HTML:
Покрасить Блок в красный цвет
Покрасить Блок в синий цвет
Покрасить Блок в зелёный цвет

Блок

CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .spanRed:hover~.block{ background:red; } .spanBlue:hover~.block{ background:blue; } .spanGreen:hover~.block{ background:green; }
Демо

Анимируем

Очень интересного эффекта можно достичь в совокупности с новыми возможностями CSS3. Например, в примере ниже используется свойство transition.

Пример

HTML:
Вправо Влево Вверх Вниз

Блок

CSS: span{ position:absolute; display:block; width:100px; height:50px; margin:10px; background:silver; cursor:pointer; } .left{ top:12%; } .right{ top:12%; left:40%; } .top{ left:20%; } .down{ top:25%; left:20%; } .block{ position:absolute; top:50%; right:50%; width:100px; height:50px; margin:5px; background:gray; -webkit-transition:all 2s ease; -o-transition:all 2s ease; -moz-transition:all 2s ease; } .right:hover~.block{ right:10%; } .left:hover~.block{ right:90%; } .top:hover~.block{ top:10%; } .down:hover~.block{ top:90%; }
Демо

Как видите, у селектора обобщенных родственных элементов есть достаточное количество интересных способов применения. В последнее время CSS продвинулся далеко и позволяет реализовать то, что раньше возможно было только с использованием JavaScript.
Но всё-таки, на мой взгляд, если провести аналогии, CSS - это механическая составляющая (если угодно - “железо”) которая не предназначена для построения логики. JavaScript, например, может выступать в роли “программного обеспечения”.
Итак, в этой статье я попытался раскрыть тему селектора обобщенных родственных элементов. Получилось или нет, судить вам.

Для изменение свойства того или иного элемента в CSS существует такой понятие как селектор :hover .
Особенно широкое распространение hover приобретает когда нужно изменить свойство ссылки при наведении курсора. Например мы легко может подчеркнуть ссылку, которая по умолчанию не подчеркнута:

Уроки, рецепты CSS

При помощи a:link и a:visited мы указали свойства для всех ссылок, в том числе тех по которым пользователь переходил ранее (:visited ). Все ссылки приобретают зеленый цвет и становятся похожими на обычный текст, без подчеркивания. В то время как a:hover дает указание подчеркнуть ссылку при каждом наведении курсора.
Таким же образом мы можем добавить бордюр изображению при наведении мышки:

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

Жизнь прожить,
не стили CSS выучить.

CSS выучить, не жизнь прожить.

При наведении на первое предложение, текст внутри тега подсвечивается красным. При этом часть вне остаётся зеленой. Также цвет не меняется при наведении курсора на нижний текст, расположенного за пределами тега

.
Чтобы рецепт стал более наглядным, озвучим конкретное техническое задание: имеется блок DIV , внутри которого помещено два изображения. Первое изображение показано, а второе – спрятано и должно появляться только при наведении мышки на блок DIV .
Рецепт решения прост:

: при наведении курсора на изображение монитора, появляется стрелка с зеленой тенью в левом верхнем углу. Когда пользователь убирает курсор с изображения, изображение playButton.png снова пропадает.

Стоит вспомнить что конструкция div#Block:hover применяется в случае когда у

есть id=»Block» . Когда речь идет о классе class=»Block» используют точку div.Block:hover .

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

Синтаксис применения псевдоклассов следующий.

Селектор:Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green} ), а также к контекстным селекторам (.menu A:hover {background: #fc0} ). Если псевдокласс указывается без селектора впереди (:hover ), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

определяющие состояние элементов;
имеющие отношение к дереву элементов;
указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

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

:active

Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.

:link

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

Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются , на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса:focus

HTML5 CSS 2.1 IE Cr Op Sa Fx

Псевдоклассы

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега . При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.