Esiste una pseudo-classe CSS opposta a: hover?


91

C'è una pseudo-classe in CSS da specificare

:not(:hover)

O è l'unico modo per specificare un elemento che non viene spostato?

Ho esaminato diversi riferimenti CSS3 e non vedo alcuna menzione di una pseudo-classe CSS per specificare l'opposto di: hover.


1
Invece element:not(:hover)usa element.
lmgonzalves

5
@lmgonzalves Questo non funzionerà; questo forzerà lo stile sia negli stati al passaggio del mouse che in quello non al passaggio del mouse.
RockPaperLz- Mask it or Casket

Perché no :not(:hover)?
Oriol

@Oriol Solo perché non è pulita come una pseudo-classe non negata e perché potrebbe essere computazionalmente più costosa di una pseudo-classe progettata a tale scopo.
RockPaperLz- Mask it or Casket

Risposte:


146

Sì, usa :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin demo

Un altro esempio; Penso che tu voglia: "quando uno è in bilico, attenua tutti gli altri elementi" .

Se la mia ipotesi è corretta e supponendo che tutti i tuoi selettori siano all'interno dello stesso genitore:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

Altrimenti ... usa semplicemente la logica predefinita:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

La tua prima frase (ammesso che sia corretta!) Suona come la risposta. Grazie! Non sono riuscito a trovare una pseudo-classe CSS appropriata, perché non deve esistere (ancora). Gli esempi che hai fornito non sono applicabili a ciò su cui sto lavorando, ma sono molto utili e utili, a prescindere. Mi chiedo quanto sarebbe costoso quel primo esempio, poiché corrisponde a quasi tutto. qualche idea?
RockPaperLz- Mask it or Casket

@RockPaperLizard beh, se usi 1000 elementi figlio, potrei diventare un po 'lento jsbin.com/hazega/1/edit?html,css,output altrimenti 100, 200 elementi dovrebbero funzionare davvero bene.
Roko C. Buljan

Grazie. Funziona anche per :not(:disabled)e presumo un sacco di altri attributi simili.
Nessun rimborso Nessun

3

Non esiste una tale pseudo-classe. Non ce n'è bisogno, quando puoi semplicemente usare :not(:hover). L'intero punto della :not()pseudo-classe è di consentire agli autori di scrivere negazioni senza dover specificare negazioni separate di ogni pseudo-classe dinamica esistente (e futura) in cui un elemento può solo corrispondere o non corrispondere alla pseudo-classe.

Ad esempio, solo alcuni elementi possono essere :enabledo :disabled- la maggior parte degli elementi non lo sono perché la semantica semplicemente non si applica - ma un elemento può essere designato solo dal dispositivo di puntamento ( :hover) o no ( :not(:hover)). Fornire negazioni che possono essere già ottenute direttamente utilizzando :not()ne minerebbe notevolmente l'utilità (sebbene possa ancora essere utilizzato per negare qualsiasi altro selettore semplice o interi selettori complessi lungo la strada).

L'argomento secondo cui una tale pseudo-classe sarebbe meno costosa dal punto di vista computazionale è piuttosto debole. L'implementazione più ingenua di una simile pseudo-classe sarebbe un :not(:hover)controllo letterale , che non sarebbe migliore. Eventuali implementazioni più complesse o ottimizzate e stai chiedendo ai fornitori di implementare una pseudo-classe che sia veloce quanto o addirittura più veloce di :not(:hover), qualcosa che è già abbastanza raro di un caso d'uso considerando le altre opzioni che hai come cascata e :not(:hover)(per ogni volta che la cascata non è un'opzione) a cui hai prontamente accesso. Semplicemente non giustifica il tempo e lo sforzo per specificare, implementare e testare un'alternativa ad almeno un altro metodo esistente che sia funzionalmente equivalente al 100% (e che si applichi ad almeno80% degli scenari). E c'è anche il problema di nominare una simile pseudo-classe: non hai proposto un nome per questo, e non riesco nemmeno a pensare a uno buono. :not-hoverè solo più corto di due byte e solo marginalmente meno lavoro da digitare. Se non altro, è potenzialmente più confuso di :not(:hover).

Se sei preoccupato per la specificità, nota che la :not()pseudo-classe stessa non viene conteggiata per la specificità; solo il suo argomento più specifico lo è . :not(:hover)e :hoversono ugualmente specifici. Quindi anche la specificità non è un problema.

Se sei preoccupato per il supporto del browser, una tale pseudo-classe, se introdotta, sarebbe stata probabilmente introdotta insieme :not()o in un livello successivo dei Selettori, poiché non appariva in CSS2 (dove è :hoverstata introdotta per la prima volta da più di 17 anni fa, e implementato per la prima volta in IE4 un altro anno prima). Introdurlo a un livello successivo sarebbe inutile perché gli autori sarebbero semplicemente costretti a continuare a usarlo :not(:hover)fino a quando i browser non inizieranno comunque a implementare questa nuova pseudo-classe e non avrebbero motivo di cambiare.

Nota che questa non è la stessa della seguente domanda, che parla di eventi e stati (originariamente si tratta di :focuspiuttosto che :hover, ma si applica lo stesso principio): CSS ha un: blur selector (pseudo-classe)?


1

Se vuoi mostrare qualcosa solo passando il mouse su qualcos'altro, puoi usare

selector:not(:hover)

come questo:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}
<div>Hover on me</div>

<section>Peek A Boo!</section>

Ci sono diversi effetti e risultati insoliti durante l'utilizzo :not()che dovresti tenere a mente:

  • :not(:not(...)), :not(p::before)non è possibile
  • :not(*) ovviamente non verrebbe mai applicato
  • :not(.foo)corrisponderà a tutto ciò che non lo è .foo, inclusi tag come <HTML>e<body>
  • aumenta la specificità di una regola, ad esempio: #foo:not(#bar)corrisponderà allo stesso elemento del più semplice #foo, ma ha una specificità maggiore.

andoperazione con :not:

  • Elementi che non sono <div>e non <span>elementi: body :not(div):not(span){}

oroperazione con :not, questo non è ancora ben supportato.

  • Elementi che non sono .crazyo .fancy:body :not(.crazy, .fancy){}

Fonte MDN


0
a {
  /*styles*/
} 

è un normale (collegamento senza passaggio del mouse)

a:hover {
  /*styles*/
} 

è un collegamento al passaggio del mouse


2
Questo non è accurato. Il primo modellerà l'elemento, sia quando si passa con il mouse che non, a meno che non venga specificato anche il secondo. Indipendentemente da ciò, il primo viene applicato in entrambi gli stati e il secondo lo sovrascriverà semplicemente in uno dei due stati.
RockPaperLz- Mask it or Casket

Hai ragione su questo. Ma questo è il modo in cui è fatto e anche l'unico modo per farlo con CSS. Che cosa vuoi veramente ottenere?
nikola_wd

Grazie. Ho aggiunto un commento che risponde alla tua domanda nella sezione delle domande principali sopra perché un altro utente SO ha posto la tua stessa domanda.
RockPaperLz- Mask it or Casket
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.