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.
css
css-selectors
pseudo-class
RockPaperLz- Maskiere es oder Sarg
quelle
quelle
element:not(:hover)
Verwenden Sie stattdessenelement
.:not(:hover)
?Antworten:
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 }
Code-Snippet anzeigen
.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>
Andernfalls ... verwenden Sie einfach die Standardlogik:
.child{ opacity: 0.2; } .child:hover{ opacity: 1; }
quelle
:not(:disabled)
und ich nehme eine Menge anderer ähnlicher Attribute an.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
:enabled
oder: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-hover
ist 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:hover
sind 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:hover
erstmals 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
:focus
eher um als:hover
, aber es gilt dasselbe Prinzip): Verfügt CSS über einen: Blur-Selektor (Pseudoklasse)?quelle
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>
#foo:not(#bar)
dem gleichen Element wie das einfachere#foo
, hat jedoch eine höhere Spezifität.and
Betrieb mit:not
:<div>
und keine<span>
Elemente sind:body :not(div):not(span){}
or
Betrieb mit:not
, dies wird noch nicht gut unterstützt..crazy
oder.fancy
:body :not(.crazy, .fancy){}
Quell- MDN
quelle
a { /*styles*/ }
ist ein normaler (nicht schwebender Link)
a:hover { /*styles*/ }
ist ein schwebender Link
quelle