Эффекты для псевдокласса hoover


Содержание

Смена изображений с помощью псевдокласса :hover

13.06.2020, 13:57

Изменение фона ссылки с помощью псевдокласса :hover
Необходимо сделать так, чтобы при наведение на одну любую из ссылок, ее фон менял цвет на прозрачно.

Изменение стилей элемента с помощью псевдокласса hover
Здравствуйте. Нужно сделать такой эффект при наведении, как на картинке, без использования.

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

Как перечислить классы для псевдокласса hover?
Приветствую! Не могу найти информацию по вопросу. Есть несколько блоков разных классов. Но при.

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Копирайтинг - Приглашаем на хакатон по дата-журналистике

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

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

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

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

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

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

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

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

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

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

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

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

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

Красивый эффект при наведении (:before и :after)

На этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов — :after и :before. Что такое псевдоэлементы, мы очень подробно разбирали здесь.

В итоге мы должны получить следующее:

Сделаем HTML заготовку из простого списка с ссылками внутри.

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

ul <
position: absolute;
top: 20%;
left: 30%;
list-style: none;
display: flex;
>

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

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

ul li a <
display: block;
padding: 10px 20px;
margin: 20px 0; /* Отступы для псевдоэлемента сверху и снизу от меню */
transition: .5s;
position: relative;
>

Заготовка в виде меню для демонстрации эффекта неведения, готова. А теперь приступим к самому эффекту. Пока наше меню выглядит так:

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

посмотрим на код ниже.

ul li a:before <
content: »;
position: absolute;
top: 0;
left: 0;
border-top: 1px solid #44c09d;
border-bottom: 1px solid #44c09d;
transform: scaleY(2);
transition: .5s;
>

Почему мы не можем просто нарисовать эти линии в HTML-разметке, а затем их спрятать? Думаю, что неопытный верстальщик так и сделал бы. Но мы будем учиться все делать правильно. Зачем загромождать HTML-страницу лишним кодом, когда существует псевдоэлемент before? До меню (before), мы получили две линии, за счет однопиксельных бордюров и для жирности увеличили их в 2 раза.

Теперь спрячем эти линии, сделав их прозрачными, чтобы при наведении они плавно появлялись.

ul li a:before <
opacity: 0;
>

Получается, что мы прописываем стили для псевдокласса hover псевдоэлемента before, звучит забавно.

ul li a:hover:before <
transform: scaleY(1.2); /* Масштабирование уменьшение */
opacity: 1;
>

Теперь копируем код с before и меняем это слово на after. Убираем из кода свойство opacity, меняем значение у transform и прописываем background.

ul li a:after <
transition: .5s; /* Плавный переход */
background: #44c09d;
>

ul li a:hover:after <
transform: scale(1);
>

Теперь при наведении на пункты меню, появляются прямоугольники того же цвета, все сливается. Пропишем цвет у пунктов меню — белым при hover эффекте.

И добавим к обоим псевдоэлементам before и after порядок наложения слоев, чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.

Посмотреть, как работает этот эффект при наведении, вы можете на

Код hover эффекта целиком:

Для тех, кто только начал изучать HTML5 и CSS3, будет полезным пройти мой видеокурс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Девять простых примеров CSS3 анимации

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

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

    Цукерберг рекомендует:  Ретаргетинг для контекста

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

    Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

    1. Изменение цвета при наведении курсора

    Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

    2. Появление рамки

    Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

    3. Свинг

    Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

    • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
    • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

    4. Затухание

    Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

    Для противоположного результата поменяйте значения местами:

    5. Увеличение

    Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

    6. Уменьшение

    Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

    7. Трансформация в круг

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

    8. Вращение

    Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

    9. 3D тень

    Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

    Поддержка браузерами

    На сегодняшний день свойство transition поддерживается следующими браузерами:

    Десктопные браузеры
    Internet Explorer Поддерживается версией IE 10 и выше
    Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
    Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
    Opera Поддерживается с версии 12.1
    Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
    Мобильные браузеры
    iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
    Opera Mobile Поддерживается с версии 12.1
    Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
    Chrome/Firefox для Android Поддерживается с версии 47/44
    Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
    UC Browser для Android Поддерживается с префиксом -webkit-

    Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

    Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

    Сочетание с псевдоклассами

    Псевдоклассы нельзя применять к псевдоэлементам, поскольку они в такой комбинации работать не будет. Таким образом сочетание ::after.visited или ::before:hover не действует. А вот псевдоэлементы к псевдоклассам присоединять допустимо и связка .visited::after или :hover::before уже работает.

    Использование псевдоклассов позволяет расширить возможности по стилизации элементов и добавить к ним разные эффекты, вроде всплывающей подсказки. Сам текст подсказки мы добавим через пользовательский атрибут data-title , а выводить его будем через свойство content и значение attr(data-title) .

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

    Вывод текста и его оформление возлагается на селектор .photo:hover::after (пример 1). Таким образом, текст подсказки выводится при наведении курсора на картинку.

    Пример 1. Создание всплывающей подсказки

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

    Рис. 1. Вид подсказки при наведении курсора на картинку

    Текст подсказки отображается мгновенно без всяких задержек. Чтобы сделать появление подсказки плавным добавим свойство transition и переделаем стили, оставив у :hover только изменяемые в процессе анимации свойства. Остальное оформление перенесём в ::after , как показано в примере 2.

    Как при наведении на один элемент менять стили другого элемента?

    Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
    Можно ли это сделать только на css ?
    К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали другого цвета.

    Как записать?
    Так не работает:

    9 ответов 9

    Для соседних элементов:

    Для любых элементов(оба блока должны быть внутри одного элемента):

    Если нужно изменить все заголовки в одном блоке, на который навели курсор мыши, то вот так:

    Если же нужно изменять стиль элемента, который находится выше элемента с псевдоклассом :hover, то я делал так (размещал изменяемый элемент ниже элемента с псевдоклассом :hover и при помощи flexbox вытягивал его на нужное мне место):

    Цукерберг рекомендует:  Введение в Yii2 Framework

    Заранее говорю, русский язык у меня не самая сильная сторона, заранее извиняюсь за ошибки, если будут ;) Выше показанные примеры все правильные, но они очень ограничены, при желании изменить другой элемент(который может быть совсем далеко) будет не возможно что-то изменить. Но я могу предложить вариант с JavaScript и он чень простой для усвоения. Главное не бойтесь использовать :)

    По сути, ответа на поставленый вопрос нет пока.

    «Как при наведении на один элемент (hover) менять стили другого элемента css?»

    Видимо если элементы не соседние и не дочерние, то только скриптами.

    Здесь по классическому CSS за меня всё уже сказали, однако добавлю, что если Вы хотите писать так, как указали (цитирую):

    Можете использовать препроцессоры CSS (SASS/LESS).

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

    CSS псевдокласс :hover

    Значение и применение

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

    Если вы используете псевдоклассы :link и :visited, то псевдокласс :hover должен быть расположен после них.

    Поддержка браузерами

    Селектор Chrome Firefox Opera Safari IExplorer Edge
    :hover 4.0 2.0 9.6 3.1 7.0 12.0

    CSS cинтаксис:

    Версия CSS

    Пример использования

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

    Пример использования псевдокласса :hover. CSS селекторы

    Hover-эффекты для изображений

    Варианты оформления фотографий при наведении на них мышки с целью увеличения

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

    В этой заметке я старался как можно больше упростить оформление ховер-эффектов, при этом не потеряв их привлекательности.

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

    Мне приходилось создавать и оформлять множество фотогалерей на различных сайтах, и в 90% случаях все фотографии там не имели каких-либо подписей. Поэтому на всех примерах в данной заметке не будет оформления названия и описания фотографии, а только значок ее увеличения и соотв. самого изображения.

    Если есть необходимость подписать фотографию, то можно просто добавить текст ниже нее.

    Смена изображений с помощью псевдокласса :hover

    13.06.2020, 13:57

    Изменение фона ссылки с помощью псевдокласса :hover
    Необходимо сделать так, чтобы при наведение на одну любую из ссылок, ее фон менял цвет на прозрачно.

    Изменение стилей элемента с помощью псевдокласса hover
    Здравствуйте. Нужно сделать такой эффект при наведении, как на картинке, без использования.

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

    Как перечислить классы для псевдокласса hover?
    Приветствую! Не могу найти информацию по вопросу. Есть несколько блоков разных классов. Но при.

    Есть ли противоположный CSS псевдокласс для: hover?

    Есть ли псевдокласс в CSS, чтобы указать

    Или это единственный способ указать элемент, который не зависает?

    Я просмотрел несколько ссылок CSS3, и я не вижу упоминания псевдо-класса CSS, чтобы указать противоположность: hover.

    Да, используйте :not(:hover)

    Другой пример; Я думаю, вы хотите: «когда кто-то завис, тускнет все остальные элементы».

    Если мое предположение верно и предполагается, что все ваши селекторы находятся внутри одного и того же родителя:

    В противном случае. просто используйте логику по умолчанию:

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

    Например, только некоторые элементы могут быть либо :enabled , либо :disabled — большинство элементов не являются ни потому, что семантика просто не применяется, но элемент может быть указан либо только указательным устройством ( :hover ), или нет ( :not(:hover) ). Предоставление отрицаний, которые могут быть достигнуты непосредственно с помощью :not() , сильно подорвало бы его полезность (хотя его все равно можно было бы использовать для отрицания любого другого простого селектора — или весь комплекс селекторов по дороге).

    Аргумент о том, что такой псевдокласс был бы менее затратным с точки зрения затрат, довольно слаб. Самая наивная реализация такого псевдокласса была бы буквальной проверкой :not(:hover) , которая была бы не лучше. Любые более сложные или оптимизированные реализации, и вы просите продавцов внедрить псевдокласс, который является либо быстрым, либо даже быстрее, чем :not(:hover) , что-то, что уже достаточно необычно для использования, учитывая другие параметры, которые у вас есть, такие как каскадные и :not(:hover) (для всякий раз, когда каскадирование не является вариантом), к которому у вас есть доступ. Это просто не оправдывает время и усилия по спецификации, внедрению и тестированию альтернативы по крайней мере одному другому существующему методу, который на 100% функционально эквивалентен (и относится к по меньшей мере 80% сценариев). И там также вопрос о названии такого псевдокласса — вы не предложили его имя, и я тоже не могу думать о хорошем. :not-hover сокращается только на два байта и лишь незначительно меньше работает для ввода. Во всяком случае, это потенциально более запутанно, чем :not(:hover) .

    Если вы обеспокоены спецификой, обратите внимание, что псевдоклассы :not() не учитываются для специфичности; только его наиболее конкретный аргумент -. :not(:hover) и :hover одинаково специфичны. Поэтому специфика также не является проблемой.

    Если вас беспокоит поддержка браузера, такой псевдокласс, если он будет представлен, скорее всего, был бы представлен рядом с :not() или на более позднем уровне селекторов, поскольку он не отображался в CSS2 (где :hover был впервые представлен более 17 лет назад и впервые реализован в IE4 еще до этого года). Представление его на более позднем уровне было бы бессмысленным, потому что авторы просто были бы вынуждены продолжать использовать :not(:hover) , пока браузеры не начнут внедрять этот новый псевдокласс в любом случае, и у них не будет причин переключаться.

    Обратите внимание, что это не то же самое, что следующий вопрос, который говорит о событиях против состояний (изначально о :focus , а не :hover , но применяется тот же принцип): Имеет ли CSS: селектор размытия (псевдокласс)?

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих