Hover псевдокласс: Псевдокласс :hover — Селекторы. Знакомство — HTML Academy — Вебджем.рф

Содержание

CSS учебник

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

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

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

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   INPUT:focus {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="">
   <p><input type="text" value="Черный текст"></p>
   <p><input type="text" value="Черный текст"></p>
  </form>
 </body>
</html>

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

Рис. 15.1. Изменение стиля текста при получении фокуса

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

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

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

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   A:link {
    color: #036; /* Цвет непосещенных ссылок */
   }
   A:visited {
    color: #606; /* Цвет посещенных ссылок */
   }
   A:hover {
    color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
   }
   A:active {
    color: #ff0; /* Цвет активных ссылок */
   }
  </style>
 </head>
 <body>
  <p>
   <a href="1.html">Ссылка 1</a> |
   <a href="2.html">Ссылка 2</a> |
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover, в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   table { border-spacing: 0; }
   td { padding: 4px; }
   tr:hover {
    background: #fc0; /* Меняем цвет фона строки таблицы */
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
    <th></th>
    <th>Пики</th>
    <th>Трефы</th>
    <th>Бубны</th>
    <th>Червы</th>
   </tr>
   <tr>
    <td>Чебурашка</td>
    <td>5</td><td>2</td><td>4</td><td>2</td>
   </tr>
   <tr>
    <td>Крокодил Гена</td>
    <td>2</td><td>7</td><td>1</td><td>3</td>
   </tr>
   <tr>
    <td>Шапокляк</td>
    <td>5</td><td>4</td><td>3</td><td>1</td>
   </tr>
   <tr>
    <td>Крыса Лариса</td>
    <td>1</td><td>0</td><td>5</td><td>7</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Псевдоклассы, имеющие отношение к дереву документа

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

:first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).

Пример 15.4. Использование псевдокласса :first-child

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style type="text/css">
   B:first-child {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>

  <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
  adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt
  ut lacreet dolore magna aliguam erat volutpat.
  </p>

  <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
  consequat</b>.</p>

 </body>
</html>

Результат примера показан ниже (рис. 15.4).

Рис. 15.4. Использование псевдокласса :first-child

В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7. 0.

Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).

Пример 15.5. Отступы для абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Псевдоклассы</title>
  <style>
   P {
    text-indent: 1em; /* Отступ первой строки */
   }
   P:first-child {
    text-indent: 0; /* Для первого абзаца отступ убираем */
   }
  </style>
 </head>
 <body>

  <p>Историю эту уже начали забывать, хотя находились горожане, которые
  время от времени рассказывали ее вновь прибывшим в город посетителям. </p>
  <p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее
  в действительности событие. И, тем не менее, ни один человек не решался
  заикнуться о ней с наступлением темноты.</p>
  <p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
 </body>

</html>

Результат примера показан ниже (рис. 15.5).

Рис. 15.5. Изменение стиля первого абзаца

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

Псевдоклассы, задающие язык текста

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

:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

Элемент:lang(язык) { … }

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   P {
    font-size: 150%; /* Размер текста */
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
    quotes: "\00AB" "\00BB";
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut,
  Dieu le veut</q>. </p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>

 </body>
</html>

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Рис. 15.6. Разные кавычки для разных языков

Вопросы для проверки

1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.

A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }

Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?

Код CSS не валидный.
К селектору A не добавлен псевдокласс :link.
Псевдокласс :visited стоит после :hover.
Псевдокласс :active стоит после :visited.
Неверное значение свойства color у A:hover.

2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?

:active
:first-child
:focus
:hover
:lang

3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?

К непосещённым ссылкам.
К посещённым ссылкам.
К любым ссылкам при наведении на них курсора мыши.
К посещённым ссылкам при наведении на них курсора мыши.
Ни к одному элементу.

Ответы

1. Псевдокласс :visited стоит после :hover.

2. :first-child

3. Ни к одному элементу.

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

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

Например, псевдоклассы могут использоваться, чтобы определять

стили элементов, когда пользователь наводит на них курсор мыши,
разные стили для посещенных и не посещенных ссылок,
стиль элемента, когда он получает фокус.

Наведи сюда мышь

Синтаксис

Декларация селектора с псевдоклассом имеет следующий синтаксис:

селектор:псевдокласс {
  свойство: значение;
}

Т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.

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

Ссылки могут отображаться разными способами.

Есть четыре псевдокласса ссылки:

:link — обычная, не посещенная ссылка
:visited — ссылка, которую пользователь уже посетил
:hover — ссылка, на которую наведен курсор мыши
:active — ссылка в момент нажатия

a:link {
   color: blue;
}
a:visited {
   color: purple;
}
a:active {
   color: red;
}
a:hover {
   text-decoration: none;
   color: blue;
   background-color: yellow;
}

Примечание: Чтобы CSS определения состояния ссылки были эффективными, необходимо соблюдать некоторые правила: a:hover должна стоять после a:link и a:visited, а a:active должна стоять после a:hover!

Назначение иного цвета для посещенных ссылок – это хорошая практика, поскольку многие пользователи этого ожидают, хотя CSS предоставляет возможность этого не делать.

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

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

Псевдоклассы можно комбинировать с HTML классами:

a.highlight:hover {
  color: #ff0000;
}

Псевдокласс :hover с другими элементами

Кроме всего прочего псевдокласс :hover может использоваться с любыми элементами, а не только со ссылками.

В следующем примере псевдокласс :hover используется с элементом <div>:

div:hover {
  background-color: blue;
}

К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.

Простая появляющаяcя подсказка

Пример простой появляющейся подсказки. При наведении на элемент <div> отображается элемент <p>:

Наведите сюда, чтобы показать элемент <p>.

Тада! А вот и я!

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Псевдокласс :first-child

Псевсдокласс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.

В следующем примере селектор соответствует любому элементу <p>, который является первым дочерним элементом любого элемента:

p:first-child {
  color: blue;
}

В следующем примере селектор соответствует первому элементу <i> внутри всех элементов <p>:

p i:first-child {
  color: blue;
}

В следующем примере селектор соответствует всем элементам <i> внутри элементов <p>, которые являются первыми дочерними элементами другого элемента:

p:first-child i {
  color: blue;
}

Псевдокласс :lang

Псевдокласс :lang позволяет определять особые правила для разных языков.

В следующем примере :lang определяет цитатные символы для элемента <q> с атрибутом lang=»no»:

<html>
<head>
<style>
  q:lang(no) {
    quotes: "~" "~";
  }
</style>
</head>
<body>
<p>Какой-то текст <q lang="no">Такая-то цитата</q> Какой-то текст.</p>
</body>
</html>

Другие псевдоклассы

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

Псевдокласс	Пример	Описание
:checked	input:checked	Выбирает каждый элемент <input> со статусом «включен» (с атрибутом checked)
:disabled	input:disabled	Выбирает каждый заблокированный элемент <input> (с атрибутом disabled)
:empty	p:empty	Выбирает все заданные элементы, у которых нет дочерних элементов
:enabled	input:enabled	Выбирает все доступные элементы <input>
:first-of-type	p:first-of-type	Выбирает каждый элемент, который является первым дочерним заданным элементом своего родителя
:focus	input:focus	Выбирает элемент, на который переведен фокус
:in-range	input:in-range	Выбирает элемент <input> со значением в заданном диапазоне
:invalid	input:invalid	Выбирает все элементы <input>, значение которых не соответствует указанному типу
:last-child	p:last-child	Выбирает каждый элемент, который является последним дочерним элементом своего родителя
:last-of-type	p:last-of-type	Выбирает каждый элемент, который является последним дочерним заданным элементом своего родителя
:not(селектор)	:not(p)	Выбирает каждый элемент, который не является указанным элементом
:nth-child(n)	p:nth-child(2)	Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя
:nth-last-child(n)	p:nth-last-child(2)	Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента
:nth-of-type(n)	p:nth-of-type(2)	Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя
:only-of-type	p:only-of-type	Выбирает каждый элемент, который является единственным элементом такого типа у своего родителя
:only-child	p:only-child	Выбирает каждый элемент, который является единственным дочерним элементом у своего родителя
:optional	input:optional	Выбирает элементы формы без атрибута «required»
:out-of-range	input:out-of-range	Выбирает элементы <input>, значения которых выходят за пределы заданного диапазона
:read-only	input:read-only	Выбирает элементы формы с атрибутом «readonly»
:read-write	input:read-write	Выбирает элементы формы без атрибута «readonly»
:required	input:required	Выбирает элементы формы с атрибутом «required»
:root	root	Выбирает корневой элемент документа
:target	#news:target	Выбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора)
:valid	input:valid	Выбирает все элементы <input> с вылидным значением

Знакомство с псевдоклассом Hover

27 августа 2019 г. / Автор Лори Барт

Прежде чем мы погрузимся в зависание, давайте разберемся с некоторыми фундаментальными знаниями. Что такое псевдокласс?

Начнем с того, что псевдоклассы — это ключевое слово, которое следует за селектором и появляется после двоеточия ( : ). Что-то вроде этого.

 h2: активный {
  цвет синий
}

В данном случае псевдокласс равен активен . Он описывает состояние данного элемента. Когда элемент находится в этом состоянии, применяются связанные правила стиля.

Существует несколько псевдоклассов, все они перечислены здесь.

Сегодня мы поговорим о конкретном псевдоклассе hover .

Наша кнопка

Начнем с кнопки. Мы сделали его красивым, большим и читабельным.

Это отличная семантическая кнопка, но она плоская. Если мы нажмем на нее, ничего не изменится. Нет визуальной индикации того, что он доступен для нажатия!

Итак, как мы можем это изменить?

Давайте использовать JavaScript!

Долгое время для создания подобного динамического поведения использовался JavaScript. Давайте посмотрим на пример.

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

hover

В нашем примере JavaScript функции mouseover и mouseout содержали логику для изменения стилей. Но это все, что мы сделали. Для этого нам не нужен JavaScript!

Как оказалось, нет. Мы можем реализовать ту же функциональность с помощью псевдокласса CSS.

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

Кроме того, пока CSS-стиль button:hover отличается от стиля, определенного для общей кнопки, нам вообще не нужен mouseout . hover будет срабатывать только тогда, когда элемент находится в этом состоянии, иначе эти стили не появятся. Не нужно их «отключать», как мы это делали в примере с JavaScript.

Если вам нужно подумать об этом по-другому, запускается событие JavaScript, и правила стиля применяются до тех пор, пока вы не замените их новыми правилами. В случае псевдоклассов CSS правила применяются только тогда, когда элемент находится в этом состоянии, и как только это не так, стиль больше не отображается.

Забавный пример

То, что мы сделали выше, не было особенно эффектным CSS. Мы только добавили пару правил, чтобы инвертировать цвета кнопки, которая появляется при наведении. Итак, вот немного более забавный пример некоторых вещей, которые вы можете делать с наведением!

Заключение

Вот и все. В следующий раз, когда вы захотите изменить элемент на основе его интерактивного состояния, проверьте некоторые псевдоклассы и посмотрите, сможете ли вы найти там то, что ищете. Замечательно использовать CSS и HTML там, где это возможно! И это широко поддерживается!

css — Как сделать эффект наведения для псевдоэлементов?

спросил 11 лет, 4 месяца назад

Изменено 4 месяца назад

Просмотрено 91к раз

У меня есть такая настройка:

 Кнопка

и это для CSS:

 #кнопка {
    цвет: #fff;
    дисплей: блок;
    высота: 25 пикселей;
    поле: 0 10px;
    отступ: 10 пикселей;
    отступ текста: 20px;
    ширина: 12%;
}
#кнопка:до {
    цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;
}

Есть ли способ придать псевдоэлементу эффект наведения, например #button:before:hover {...} , а также возможно ли заставить псевдоэлемент наводиться в ответ на наведение другого элемента вот так : #button:hover #button:before {. ..} ? Было бы неплохо использовать только CSS, но также подойдет и jQuery.

css
псевдоэлемент
псевдокласс

Вы можете изменить псевдоэлемент на основе наведения родителя:

JSFiddle DEMO

 #button:before {
    цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;
}
#кнопка:наведите:до {
    цвет фона: красный;
}

 #button { display: block;
    высота: 25 пикселей;
    поле: 0 10px;
    отступ: 10 пикселей;
    отступ текста: 20px;
    ширина: 12%;}

#button:before { цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;}

#button:hover:before { background-color: red;}

 Кнопка

Для уточнения вам НЕ МОЖЕТ дать :hover псевдоэлементу. В CSS 2018 года нет такой вещи, как ::after:hover .

#button:hover:before изменит псевдоэлемент в ответ на наведение на кнопку. Однако, если вы хотите сделать что-то нетривиальное только для псевдоэлемента, вам лучше поместить реальный элемент в свой HTML. Псевдоэлементы довольно ограничены.

Хотя CSS не позволяет вам стилизовать элементы на основе элементов, следующих за ними, обычно можно настроить что-то с тем же базовым эффектом, поместив :hover на родительский узел, т. е.:

 
    <дел>
    <дел>

#надкнопка {
    поле сверху: 25px;
    положение: родственник;
}
#кнопкаперед {
    положение: абсолютное;
    цвет фона: синий;
    ширина: 25 пикселей;
    высота: 25 пикселей;
    верх: -25px;
}
#надкнопка:наведение #кнопкаперед {
    // устанавливаем стили, которые должны применяться к buttonbefore при наведении на кнопку
}
#надкнопка:наведение #кнопкаперед:наведение {
    // отключаем стили, которые должны применяться при наведении на кнопку
    // устанавливаем стили, которые должны применяться к buttonbefore on buttonbefore hover
}

Если это просто для целей дизайна, я думаю, что лучше создать псевдоэлементы по обе стороны от прямоугольника и сделать HTML максимально простым:

HTML:

 
    Прямоугольник

CSS:

 . tabStyle {
        стиль границы: сплошной;
        цвет границы: #D8D8D8;
        фон: #D8D8D8;
        ширина: 200 пикселей;
        высота: 93px;
        цвет: #000;
        положение: родственник;
        верх: 10 пикселей;
        осталось: 49пкс;
        выравнивание текста: по центру;
    }
    .tabStyle:наведите {
        фон: #000;
        цвет границы: #000;
    }
    .tabStyle:hover::before {
        цвет границы: прозрачный #000 #000 прозрачный;
        стиль границы: сплошной;
        ширина границы: 0px 0px 100px 50px;
    }
    .tabStyle: hover:: после {
        цвет границы: прозрачный прозрачный #000 #000;
        стиль границы: сплошной;
        ширина границы: 0px 50px 100px 0px;
    }
    .tabStyle::после {
        цвет границы: прозрачный прозрачный #D8D8D8 #D8D8D8;
        стиль границы: сплошной;
        ширина границы: 0px 50px 100px 0px;
        положение: абсолютное;
        верх: -4px;
        осталось: 101%;
        содержание:"";
    }
    .tabStyle:: перед {
        цвет границы: прозрачный #D8D8D8 #D8D8D8 прозрачный;
        стиль границы: сплошной;
        ширина границы: 0px 0px 100px 50px;
        положение: абсолютное;
        верх: -4px;
        справа: 101%;
        содержание:"";
    }

Я изменил CSS, и результат можно увидеть ниже:

http://jsfiddle.

Hover псевдокласс: Псевдокласс :hover — Селекторы. Знакомство — HTML Academy

CSS учебник

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

:active

:link

:focus

:hover

:visited

Псевдоклассы, имеющие отношение к дереву документа

:first-child

Псевдоклассы, задающие язык текста

:lang

Вопросы для проверки

Ответы

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

Синтаксис

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

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

Псевдокласс :hover с другими элементами

Простая появляющаяcя подсказка

Псевдокласс :first-child

Псевдокласс :lang

Другие псевдоклассы

Знакомство с псевдоклассом Hover

Наша кнопка

Давайте использовать JavaScript!

hover

Забавный пример

Заключение

css — Как сделать эффект наведения для псевдоэлементов?

Добавить комментарий Отменить ответ

Рубрики