Есть ли в CSS псевдокласс для указания
:not(:hover)
Или это единственный способ указать элемент, который не зависает?
Я просмотрел несколько ссылок на CSS3 и не нашел упоминания о псевдоклассе CSS, который бы указывал противоположность: hover.
css
css-selectors
pseudo-class
RockPaperLz - маска или шкатулка
источник
источник
element:not(:hover)
используйтеelement
.:not(:hover)
?Ответы:
Да, использовать
:not(:hover)
.child:not(:hover){ opacity: 0.3; }
jsBin демонстрация
Другой пример; Я думаю, вы хотите: «когда зависает один, затемнять все остальные элементы» .
Если мое предположение верно и если все ваши селекторы находятся внутри одного родителя:
.parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{ opacity: 1; // Not the hovered one }
Показать фрагмент кода
.child{ display:inline-block; background:#000; border:1px solid #fff; width: 50px; height: 50px; transition: 0.4s; } .parent:hover .child{ opacity: 0.3; } .parent .child:hover{ opacity: 1; }
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
В противном случае ... просто используйте логику по умолчанию:
.child{ opacity: 0.2; } .child:hover{ opacity: 1; }
источник
:not(:disabled)
и я предполагаю тонну других подобных атрибутов.Нет такого псевдокласса. Этого не должно быть, когда можно просто использовать
: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 селектор: blur (псевдокласс)?источник
Если вы хотите отображать что-то только при наведении курсора на что-то другое, вы можете использовать
selector:not(:hover)
как это:
section{ font-size:3em; } div:not(:hover) + section{ display:none; }
<div>Hover on me</div> <section>Peek A Boo!</section>
При использовании есть несколько необычных эффектов и результатов,
:not()
о которых следует помнить::not(:not(...))
,:not(p::before)
невозможно:not(*)
очевидно, никогда не будет применяться:not(.foo)
будет соответствовать всему, чего нет.foo
, включая такие теги, как<HTML>
и<body>
#foo:not(#bar)
будет соответствовать тому же элементу, что и более простой#foo
, но имеет более высокую специфичность.and
работа с:not
:<div>
и не являются<span>
элементами:body :not(div):not(span){}
or
работа с:not
, это еще не поддерживается..crazy
или.fancy
:body :not(.crazy, .fancy){}
Источник MDN
источник
a { /*styles*/ }
это нормальная (не зависшая ссылка)
a:hover { /*styles*/ }
это зависшая ссылка
источник