Gibt es eine entgegengesetzte CSS-Pseudoklasse zu: schweben?

85

Gibt es in CSS eine Pseudoklasse anzugeben?

:not(:hover)

Oder ist dies die einzige Möglichkeit, ein Element anzugeben, das nicht schwebt?

Ich habe mehrere CSS3-Referenzen durchgesehen und sehe keine Erwähnung einer CSS-Pseudoklasse, um das Gegenteil von: hover anzugeben.

RockPaperLz- Maskiere es oder Sarg
quelle
1
element:not(:hover)Verwenden Sie stattdessen element.
lmgonzalves
5
@lmgonzalves Das wird nicht funktionieren; Dadurch wird der Stil sowohl im schwebenden als auch im nicht schwebenden Zustand erzwungen.
RockPaperLz-Mask it oder Casket
Warum nicht :not(:hover)?
Oriol
@Oriol Nur weil es nicht so sauber ist wie eine nicht negierte Pseudoklasse und weil es möglicherweise rechenintensiver ist als eine für diesen Zweck entwickelte Pseudoklasse.
RockPaperLz-Mask it oder Casket

Antworten:

137

Ja, benutze :not(:hover)

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

jsBin Demo

Ein anderes Beispiel; Ich denke, Sie möchten: "Wenn einer schwebt, dimmen Sie alle anderen Elemente" .

Wenn meine Annahme richtig ist und alle Ihre Selektoren sich im selben übergeordneten Element befinden:

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

Andernfalls ... verwenden Sie einfach die Standardlogik:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}
Roko C. Buljan
quelle
Ihr erster Satz (vorausgesetzt, er ist richtig!) Klingt wie die Antwort. Vielen Dank! Ich konnte keine passende CSS-Pseudoklasse finden, da sie (noch) nicht existieren darf. Die von Ihnen angegebenen Beispiele gelten nicht für das, woran ich arbeite, sind jedoch unabhängig davon sehr nützlich und hilfreich. Ich frage mich, wie teuer dieses erste Beispiel wäre, da es zu fast allem passt. Irgendwelche Gedanken?
RockPaperLz-Mask it oder Casket
@RockPaperLizard gut, wenn Sie 1000 untergeordnete Elemente verwenden, wird es möglicherweise etwas langsam. Jsbin.com/hazega/1/edit?html,css,output andernfalls sollten 100, 200 Elemente wirklich gut funktionieren.
Roko C. Buljan
Vielen Dank. Funktioniert auch für :not(:disabled)und ich nehme eine Menge anderer ähnlicher Attribute an.
Keine Rückerstattung Keine Rückgabe
3

Es gibt keine solche Pseudoklasse. Es muss nicht sein, wenn Sie nur verwenden können :not(:hover). Der springende Punkt der :not()Pseudoklasse besteht darin, den Autoren das Schreiben von Negationen zu ermöglichen, ohne separate Negationen für jede vorhandene (und zukünftige) dynamische Pseudoklasse angeben zu müssen, bei denen ein Element nur entweder mit der Pseudoklasse übereinstimmen kann oder nicht.

Zum Beispiel können nur einige Elemente entweder sein :enabledoder :disabled- die meisten Elemente sind keine, weil die Semantik einfach nicht zutrifft - aber ein Element kann nur entweder vom Zeigegerät ( :hover) oder nicht ( :not(:hover)) festgelegt werden. Das Bereitstellen von Negationen, die bereits direkt mit erreicht werden können, :not()würde seine Nützlichkeit erheblich beeinträchtigen (obwohl es immer noch verwendet werden könnte, um andere einfache Selektoren - oder ganze komplexe Selektoren in der Zukunft - zu negieren ).

Das Argument, dass eine solche Pseudoklasse rechnerisch günstiger wäre, ist ziemlich schwach. Die naivste Implementierung einer solchen Pseudoklasse wäre eine wörtliche :not(:hover)Prüfung, die nicht besser wäre. Bei komplexeren oder optimierten Implementierungen fordern Sie die Anbieter auf, eine Pseudoklasse zu implementieren, die entweder so schnell oder sogar schneller als :not(:hover)ist. Dies ist in Anbetracht der anderen Optionen, die Sie haben, wie z. B. Kaskadierung und :not(:hover)(für) , für einen Anwendungsfall bereits ungewöhnlich genug wenn Kaskadierung keine Option ist), auf die Sie sofort zugreifen können. Es rechtfertigt einfach nicht den Zeit- und Arbeitsaufwand, eine Alternative zu mindestens einer anderen vorhandenen Methode zu spezifizieren, zu implementieren und zu testen, die zu 100% funktional äquivalent ist (und die zumindest für mindestens eine gilt)80% der Szenarien). Und es gibt auch das Problem, eine solche Pseudoklasse zu benennen - Sie haben keinen Namen dafür vorgeschlagen, und ich kann mir auch keinen guten vorstellen. :not-hoverist nur um zwei Bytes kürzer und nur unwesentlich weniger zu tippen. Wenn überhaupt, ist es möglicherweise mehr verwirrend als :not(:hover).

Wenn Sie sich Sorgen um die Spezifität machen, beachten Sie, dass die :not()Pseudoklasse selbst nicht für die Spezifität gezählt wird. nur das spezifischste Argument ist . :not(:hover)und :hoversind gleichermaßen spezifisch. Spezifität ist also auch kein Thema.

Wenn Sie sich Sorgen über die Browserunterstützung machen, wäre eine solche Pseudoklasse, falls sie eingeführt wurde, wahrscheinlich entweder neben :not()oder in einer späteren Ebene von Selektoren eingeführt worden, da sie nicht in CSS2 (wo sie :hovererstmals seit mehr als 17 Jahren eingeführt wurde) enthalten war vor und erstmals ein weiteres Jahr zuvor in IE4 implementiert). Eine spätere Einführung wäre sinnlos, da die Autoren lediglich gezwungen wären, die Verwendung fortzusetzen, :not(:hover)bis die Browser ohnehin mit der Implementierung dieser neuen Pseudoklasse beginnen, und sie keinen Grund hätten, zu wechseln.

Beachten Sie, dass dies nicht mit der folgenden Frage identisch ist, die sich mit Ereignissen und Zuständen befasst (ursprünglich geht es :focuseher um als :hover, aber es gilt dasselbe Prinzip): Verfügt CSS über einen: Blur-Selektor (Pseudoklasse)?

BoltClock
quelle
1

Wenn Sie etwas nur anzeigen möchten, wenn Sie mit der Maus über etwas anderem schweben, können Sie es verwenden

selector:not(:hover)

so was:

section{
   font-size:3em;
}

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

<section>Peek A Boo!</section>

Es gibt einige ungewöhnliche Effekte und Ergebnisse bei der Verwendung :not(), die Sie berücksichtigen sollten:

  • :not(:not(...)), :not(p::before)Ist nicht möglich
  • :not(*) würde offensichtlich nie angewendet werden
  • :not(.foo)passt zu allem, was nicht ist .foo, einschließlich Tags wie <HTML>und<body>
  • erhöht die Spezifität einer Regel, zum Beispiel: entspricht #foo:not(#bar)dem gleichen Element wie das einfachere #foo, hat jedoch eine höhere Spezifität.

andBetrieb mit :not:

  • Elemente, die keine <div>und keine <span>Elemente sind: body :not(div):not(span){}

orBetrieb mit :not, dies wird noch nicht gut unterstützt.

  • Elemente, die nicht sind .crazyoder .fancy:body :not(.crazy, .fancy){}

Quell- MDN

Aditya Patnaik
quelle
0
a {
  /*styles*/
} 

ist ein normaler (nicht schwebender Link)

a:hover {
  /*styles*/
} 

ist ein schwebender Link

nikola_wd
quelle
2
Dies ist nicht korrekt. Der erste Stil formatiert das Element sowohl im schwebenden als auch im nicht schwebenden Zustand, es sei denn, der zweite ist ebenfalls angegeben. Unabhängig davon wird der erste in beiden Zuständen angewendet, und der zweite überschreibt ihn nur in einem der beiden Zustände.
RockPaperLz-Mask it oder Casket
Da hast du recht. Aber das ist, wie es gemacht wird und auch der einzige Weg, es mit CSS zu machen. Was möchten Sie eigentlich erreichen?
Nikola_wd
Vielen Dank. Ich habe einen Kommentar hinzugefügt, der Ihre Frage im Hauptfragebereich oben beantwortet, da ein anderer SO-Benutzer dieselbe Frage wie Ihre gestellt hat.
RockPaperLz-Mask it oder Casket