Css after hover: css — How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

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

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
   
2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
   
3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

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

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

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

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

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

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что

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

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

p:first-letter {font-size:5em; float:left; color:red}

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo. ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Как написать условие :hover для:before и a:after в CSS?

Посмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Easy
• Последнее обновление: 18 мая, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Селекторы :before и :after в CSS используются для добавления содержимого до и после элемента. :hover — это псевдокласс, а :before и :after — псевдоэлементы. В CSS псевдоэлементы пишутся после псевдокласса.

Синтаксис: 

 a:hover::before {
    // Свойство CSS
}
а: наведение :: после {
    // Свойство CSS
} 

В CSS3 двойное двоеточие (::) используется для обозначения псевдоэлемента. Для IE8 или старше используется одно двоеточие (синтаксис CSS2).

Пример 1: В этом примере используется условие :hover для:before и a:after в элементе.

html

Выход:

HTML перед перемещением мыши. для a:before и a:after в элементе.

html

Output:

HTML Before Mouse move over:

After Mouse move over :

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

• Как свойство псевдокласса Hover работает в CSS
  • – Пример – CSS Hover в действии
• Причины неработающего зависания
  • 1. Смартфоны — нет состояния зависания
  • 2. Неверный формат CSS
  • 3. Специфика CSS
  • 4. Использование правила !important
  Заключение0 в CSS0

  Как свойство псевдокласса Hover работает в CSS

  Являясь одним из многих свойств псевдокласса в CSS, селектор наведения позволяет вам стилизовать элементы при наведении курсора на него , это работает практически на всех элементы. Его синтаксис следующий:

  элемент :hover { Правила CSS; }

  Элемент относится к различным элементам, к которым будет применяться свойство псевдокласса наведения. В то время как :hover указывает браузеру применять правила CSS, когда курсор находится над элементами.

  – Пример – CSS Hover в действии

  Предположим, вы хотите украсить все элементы

  на веб-странице с помощью

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

  Hello World Чтобы украсить текст при наведении, CSS позволяет сделать это следующим образом: h4:hover { text-decoration: оранжевый 4px подчеркивание надчеркивание; }

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

  Причины неработающего наведения

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

  К ним относятся:

  1. Смартфоны — нет состояния наведения

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

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

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

  Однако проблема возникает, когда состояние наведения либо показывает, либо скрывает другой элемент посредством видимости или свойств отображения в CSS. Такие эффекты наведения на устройствах iOS изменятся на поведение двойного нажатия, поскольку браузер не может правильно использовать CSS наведения.

  Вот почему вам необходимо адаптировать свой дизайн с настольного компьютера к мобильному, чтобы он лучше работал на небольших устройствах.

  Решения проблем с наведением курсора на смартфонах

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

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

  Избегайте показа кнопки «Добавить в корзину» на сайтах электронной коммерции при наведении курсора и сохранения ее на мобильных устройствах. Отлично подходит для отображения призыва к действию в среде рабочего стола, уменьшая беспорядок на веб-странице. Однако перенести этот эффект на мобильные устройства не получится .

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

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

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

  Если вам не удастся адаптировать всплывающую подсказку к мобильной среде, это может быть проблемой . Кроме того, если у него нет кнопки закрытия, закрытие может стать проблемой. Однако вы можете добавить (X), чтобы пользователи могли контролировать всплывающую подсказку на маленьких экранах.

  2. Неверный формат CSS

  Чтобы CSS работал, вы должны убедиться, что код CSS соответствует допустимому и читаемому браузерами формату. Например, стиль не будет применяться, если вы не используете правильный селектор при выборе элемента. Когда селектор состоит из разных частей, вам нужно начать с «наибольшего» до «наименьшего», поэтому, если вы напишете его в любом другом порядке, 9Эффект 0027 не применяется.

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

  Кроме того, убедитесь, что вы используете открывающую фигурную скобку ({) после каждого селектора и закрывающую фигурную скобку (}) в конце списка свойств. Обратите внимание: если вы забудете закрывающую фигурную скобку (}), это помешает CSS-эффектам под ней отображаться в браузерах.

  Кроме того, убедитесь, что вы используете двоеточие (:) между каждым свойством и его значением и точку с запятой (;) после каждого значения, чтобы браузеры могли читать ваш код CSS.

  3. Специфика CSS

  В CSS более конкретный селектор имеет тенденцию побеждать менее конкретный селектор.

  Пример.

  Специфика в действии

  Предположим, вы по-прежнему хотите оформить весь текст в тегах

  внутри тегов

  с помощью надчеркивания и подчеркивания при наведении. Код CSS по умолчанию для оформления тегов

  внутри тегов

  будет следующим:

  h4:hover { text-decoration: blue 4px underline overline; }

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

  h4:hover { text-decoration: orange 4px underline overline; }

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

  4.

  Использование правила !important в CSS

  Иногда вам может быть проще сделать менее конкретный код в CSS для работы с помощью правила !important . Однако вам лучше сначала использовать более конкретный селектор, имея в виду, что с правилом !important иногда вы получаете быстрое решение.

  Тем не менее, включая его не всегда работает . Понять, сработает ли правило !important, может быть непросто. В большинстве случаев вам просто нужно проверить это.

  Пример – !important Правило в действии

  Предположим, вы все еще хотите переопределить стиль CSS по умолчанию при наведении для тегов

  внутри элементов

  с помощью короткого селектора. CSS позволяет вам использовать правило !important непосредственно перед тем, как вы прекратите действие правила CSS, чтобы принудительно применить эффекты при наведении, например:

  h4:hover { украшение текста: оранжевый 4px подчеркивание надчеркивание !важно; }

  Заключение

  Готово! Чтобы избежать проблем со свойством hover , убедитесь, что вы учитываете контекст каждого проекта, прежде чем определять функции. Вот краткое изложение того, что вы узнали:

  • Свойство псевдокласса :hover в CSS позволяет вам стилизовать элементы при наведении курсора
  • Обычно свойство hover отлично работает в среде рабочего стола; однако это не всегда работает так, как ожидалось
  • Некоторые проблемы возникают на небольших устройствах с сенсорным экраном, которые не поддерживают наведение
  • Кроме того, наведение не будет работать, если вы используете неправильный формат CSS. Обратите внимание, что если вы не укажете правильную специфичность, стиль наведения не будет работать
  • Хотя вы можете использовать правило !important, нет гарантии, что оно всегда будет работать

  Теперь вы знаете, как избежать проблем с неработающим наведением CSS, используйте это свойство как профессионал.

  • Автор
  • Последние сообщения

  Должность решает все

  Должность решает все: Ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.

  Последние сообщения Position is Everything (посмотреть все)

  10 фрагментов кода CSS и JavaScript для создания расширенных эффектов при наведении на изображение

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

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

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

  Набор инструментов веб-дизайнера

  Неограниченные загрузки: шаблоны HTML и Bootstrap, темы и плагины WordPress и многое, многое другое!

  HTML-шаблоны

  3200+ шаблонов

  Шаблоны Bootstrap

  Более 2000 шаблонов

  Шаблоны панели мониторинга

  240+ шаблонов

  темы WordPress

  1450+ тем

  Шаблоны информационных бюллетеней

  270+ шаблонов

  Веб-шрифты

  13 500+ шрифтов

  Начать загрузку прямо сейчас!

  Photo Effects on Hover

  by Alvaro Montoro

  Это умное использование CSS и JS дублирует изображение и накладывает их друг на друга. Оттуда к каждому изображению отдельно добавляются CSS-фильтры. Этот метод приводит к эффектам кинематографического качества, которых было бы трудно достичь другими способами.

  См. Эффекты Pen Photo при наведении курсора с использованием JS и CSS3, автор Alvaro Montoro

  Быстрые и мощные эффекты для изображений

  , автор kw7oe

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

  См. Эффекты наведения пера на изображение от kw7oe

  Наведение на изображение с выдвижением Название

  by LittleSnippets

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

  See the Pen #1104 – Наведите курсор на изображение с выдвижным заголовком от LittleSnippets.net

  Show Your Cards Image Effects

  by Bruno Rodrigues

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

  См. Эффект наведения на изображение пера — CSS3, автор Bruno Rodrigues

  Эффекты наведения на изображение с изменяющейся реальностью

  , автор Dimitra Vasilopoulou

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

  См. Эффект наведения пера на изображение от Димитры Василопулу

  Эффекты разделения изображения при наведении курсора

  от Dimitra Vasilopoulou

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

  См. разделенное изображение пера | Hover Effect от Dimitra Vasilopoulou

  Pure Class Image Effect with Pure CSS

  от Mahesh Ambure

  Эта коллекция эффектов наведения доказывает, что вам не нужно быть чрезмерным, чтобы произвести сильное впечатление. Здесь есть различные варианты стиля, но каждый из них отображает текстовое содержимое и фильтры при наведении курсора. И ни одна строка JavaScript не использовалась.

  См. Pen Awesome Image Hover in Pure CSS by MAHESH AMBURE

  Key(frames) to the Wild

  by Vail Joy

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

  См. Pen Animation @keyframes в Image Hovers от Vail Joy

  The Bigger Picture Image Hover Gallery

  от Shaw

  Фотогалереи настолько широко распространены, но вы не увидите много действительно уникальных. Вот потрясающее исключение. Наведите указатель мыши на миниатюру изображения в сетке, и полноразмерная версия займет весь контейнер. Но это только половина истории. По-настоящему крутой фактор возникает из-за того, что само изображение «разделяется» и собирается обратно по мере загрузки.

  См. Pen Splitting:Image Hover Gallery от Shaw

  Эффект раскрытия разделенного изображения

  от Mark Mead

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

  См. Pen Fancy Image Splitting (SplittingJS) Марка Мида

  У нас есть драма

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

  Пусть эти примеры вдохновят вас. Затем поэкспериментируйте со способами добавить драматизма своим изображениям.

  Триггеры наведения -- Интерактивные эффекты CSS

  Запуск одного или нескольких эффектов при наведении курсора на элемент

  Обзор

  Триггер Hover , как следует из названия, запускает эффект перехода (анимация), когда пользователь выполняет действие :hover на элементе или несколько элементов. Чтобы добавить эффект к одному элементу, используйте триггеры. Если вам нужно анимировать сразу несколько эффектов, когда пользователь наводит курсор на один (родительский) элемент, используйте родительские триггеры. Вы даже можете комбинировать эти два триггера.

  Синтаксис

  Синтаксис триггера следующий: : где:

  • hover: - эффект триггера на элементе :hover
    9005| selector>): - запускает эффект для дочерних элементов, когда родительский элемент получает :hover

  " .

  Наведите курсор на элементы:

  Цвет фона

  Непрозрачность

  Нажмите вверх

   
  Цвет фона
  Непрозрачность
  Push up
   

  На родительском элементе

  Триггер множественных эффектов на дочерних элементах, когда родительский элемент получает состояние :hover используя data-tor="hover(p|):" .

  Все элементы должны быть дочерними по отношению к родительскому элементу.

  Использование

  data-tor-parent

  Добавьте data-tor-parent="hover" к родительскому элементу-оболочке, затем используйте hover(p): , чтобы вызвать множественный эффект, когда родительский элемент зависает.

  Наведите указатель мыши на оболочку:

  Масштаб

  Непрозрачность

  Поднять

   
  
    
  Масштаб
    
  Непрозрачность
    
  Отжимание
   

  Пользовательский родительский селектор

  Также можно запускать несколько эффектов без элемента data-tor-parent . Просто используйте hover(): и выберите нужный элемент.

  В этом примере показано, как создать несколько эффектов при наведении родительского селектора #wrapper .

  Наведите указатель мыши на оболочку:

  Масштаб

  Непрозрачность

  Поднять

   
  
    
   to(75%)">Масштаб
    
  Непрозрачность
    
  Отжимание
   

  Множественные эффекты

  Вы можете комбинировать несколько триггеров между или даже с родительскими триггерами в одном атрибуте data-tor .

  На одном элементе

  Использовать несколько наведения: в одном атрибуте data-tor .

  Наведите указатель мыши на элементы:

  Толчок и тень

  Уменьшение и затемнение

  Поворот и непрозрачность

   
  Push & shadow 
  Уменьшить и затемнить
  Поворот и непрозрачность
   

  На родительском элементе

  Использовать несколько hover(p): в одном атрибуте data-tor .

  Наведите указатель мыши на оболочку:

  Толчок и тень

  Уменьшение и затемнение

  Поворот и прозрачность

   
  
    
   up(xs) hover(p):shadow(risen)">Push & shadow
    
  Уменьшить и затемнить
    
  Поворот и непрозрачность
   

  Комбинация эффектов

  Вы даже можете комбинировать hover: с hover(p): . Но поскольку hover(p): имеет более высокий приоритет, он может переопределить триггер hover: для некоторых эффектов. Поставьте восклицательный знак ! перед сокращением триггера вроде этого !hover: . Это добавит атрибут !important к триггеру и переопределит родительский триггер. Это полезно, когда у вас есть несколько похожих элементов, и вам нужно анимировать их при наведении родительского триггера, но вам также нужно запускать анимацию (переход) для отдельных элементов :hover состояния без их вложения.

  наведение: триггер не работает

  Наведение на обёртку и отдельные элементы:

  Push up

  Масштаб

  Непрозрачность

  С важным

  ! отметка

  Наведите указатель мыши на обертку и отдельные элементы:

  Поднимите вверх

  Масштаб

  Непрозрачность