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

87

Есть ли в CSS псевдокласс для указания

:not(:hover)

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

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

RockPaperLz - маска или шкатулка
источник
1
Вместо этого element:not(:hover)используйте element.
lmgonzalves
5
@lmgonzalves Это не сработает; это заставит стиль как в зависшем, так и в не зависшем состоянии.
RockPaperLz- Mask it or Casket
А почему бы и нет :not(:hover)?
Oriol
@Oriol Только потому, что он не такой чистый, как неотрицательный псевдокласс, и потому, что он может быть вычислительно дороже, чем псевдокласс, разработанный для этой цели.
RockPaperLz- Mask it or Casket

Ответы:

140

Да, использовать :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{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}
Роко С. Бульян
источник
Ваше первое предложение (если оно правильное!) Звучит как ответ. Благодарность! Мне не удалось найти подходящий псевдокласс CSS, потому что он не должен существовать (пока). Приведенные вами примеры неприменимы к тому, над чем я работаю, но они, тем не менее, очень полезны и полезны. Интересно, насколько дорогим будет этот первый пример, ведь он подходит почти ко всему. есть идеи?
RockPaperLz- Mask it or Casket
@RockPaperLizard хорошо, если вы используете 1000 дочерних элементов, я могу получить немного медленный jsbin.com/hazega/1/edit?html,css,output иначе 100, 200 элементов должны работать нормально.
Roko C. Buljan
Спасибо. Также работает, :not(:disabled)и я предполагаю тонну других подобных атрибутов.
Возврат средств
3

Нет такого псевдокласса. Этого не должно быть, когда можно просто использовать :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 (псевдокласс)?

BoltClock
источник
1

Если вы хотите отображать что-то только при наведении курсора на что-то другое, вы можете использовать

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

Адитья Патнаик
источник
0
a {
  /*styles*/
} 

это нормальная (не зависшая ссылка)

a:hover {
  /*styles*/
} 

это зависшая ссылка

nikola_wd
источник
2
Это не совсем так. Первый будет стилизовать элемент как при наведении, так и без наведения, если второй также не указан. В любом случае, первое применяется в обоих состояниях, а второе просто отменяет его в одном из двух состояний.
RockPaperLz- Mask it or Casket
Вы правы насчет этого. Но это то, как это делается, а также единственный способ сделать это с помощью css. Чего вы на самом деле хотите достичь?
nikola_wd
Спасибо. Я добавил комментарий, который отвечает на ваш вопрос в разделе основных вопросов выше, потому что другой пользователь SO задал тот же вопрос, что и ваш.
RockPaperLz- Mask it or Casket