Czy istnieje pseudoklasa w CSS do określenia?
:not(:hover)
A może to jedyny sposób na określenie elementu, który nie jest wskazywany?
Przejrzałem kilka odniesień do CSS3 i nie widzę żadnej wzmianki o pseudoklasie CSS, aby określić przeciwieństwo: hover.
css
css-selectors
pseudo-class
RockPaperLz- Mask it or Casket
źródło
źródło
element:not(:hover)
użyjelement
.:not(:hover)
?Odpowiedzi:
Tak, użyj
:not(:hover)
.child:not(:hover){ opacity: 0.3; }
jsBin demo
Inny przykład; Myślę, że chcesz: „gdy się unosi, przyciemnij wszystkie pozostałe elementy” .
Jeśli moje założenie jest poprawne i zakładając, że wszystkie twoje selektory są wewnątrz tego samego rodzica:
.parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{ opacity: 1; // Not the hovered one }
Pokaż fragment kodu
.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>
W przeciwnym razie ... po prostu użyj domyślnej logiki:
.child{ opacity: 0.2; } .child:hover{ opacity: 1; }
źródło
:not(:disabled)
też i zakładam mnóstwo innych podobnych atrybutów.Nie ma takiej pseudoklasy. Nie ma takiej potrzeby, kiedy możesz po prostu użyć
:not(:hover)
. Celem:not()
pseudoklasy jest umożliwienie autorom pisania negacji bez konieczności określania oddzielnych negacji każdej istniejącej (i przyszłej) dynamicznej pseudoklasy, w której element może tylko pasować lub nie pasować do pseudoklasy.Na przykład tylko niektóre elementy mogą być
:enabled
albo:disabled
- większość elementów nie jest żadną, ponieważ semantyka po prostu nie ma zastosowania - ale element może być wyznaczony tylko przez urządzenie wskazujące (:hover
) lub nie (:not(:hover)
). Zapewnienie negacji, które można już osiągnąć bezpośrednio za pomocą:not()
, znacznie podważyłoby jego użyteczność (chociaż nadal można by go użyć do zanegowania dowolnego innego prostego selektora - lub całych złożonych selektorów w przyszłości ).Argument, że taka pseudoklasa byłaby mniej kosztowna obliczeniowo, jest dość słaby. Najbardziej naiwnym wdrożeniem takiej pseudoklasy byłoby dosłowne
:not(:hover)
sprawdzenie, co nie byłoby lepsze. Wszelkie bardziej złożone lub zoptymalizowane implementacje i prosisz dostawców o zaimplementowanie pseudoklasy, która jest albo tak szybka, albo nawet szybsza niż:not(:hover)
coś, co jest już wystarczająco rzadkie w przypadku użycia, biorąc pod uwagę inne dostępne opcje, takie jak kaskadowanie i:not(:hover)
(np. gdy kaskadowanie nie wchodzi w grę), do których łatwo masz dostęp. Po prostu nie uzasadnia czasu i wysiłku, aby specyfikować, wdrażać i testować alternatywę dla co najmniej jednej innej istniejącej metody, która jest w 100% funkcjonalnie równoważna (i ma zastosowanie do co najmniej80% scenariuszy). Jest też kwestia nazwania takiej pseudoklasy - nie zaproponowałeś jej nazwy i nie mogę wymyślić dobrej.:not-hover
jest krótszy tylko o dwa bajty i tylko nieznacznie mniej pracy przy wpisywaniu. Jeśli już, jest to potencjalnie bardziej zagmatwane niż:not(:hover)
.Jeśli martwisz się o specyficzność, zwróć uwagę, że sama
:not()
pseudoklasa nie jest liczona jako swoistość; tylko jego najbardziej konkretnym argumentem jest .:not(:hover)
i:hover
są równie konkretne. Tak więc specyficzność też nie jest problemem.Jeśli martwisz się o obsługę przeglądarek, taka pseudoklasa, jeśli została wprowadzona, prawdopodobnie została wprowadzona razem
:not()
z selektorami lub na późniejszym poziomie, ponieważ nie pojawiła się w CSS2 (gdzie:hover
po raz pierwszy została wprowadzona ponad 17 lat temu, a po raz pierwszy wdrożony w IE4 jeszcze rok wcześniej). Wprowadzenie go na późniejszym poziomie byłoby bezcelowe, ponieważ autorzy byliby po prostu zmuszeni do kontynuowania korzystania,:not(:hover)
dopóki przeglądarki i tak nie zaczną implementować tej nowej pseudoklasy i nie mieliby powodu do zmiany.Zauważ, że to nie to samo, co poniższe pytanie, które mówi o zdarzeniach i stanach (pierwotnie dotyczy
:focus
raczej niż:hover
, ale obowiązuje ta sama zasada): Czy CSS ma selektor: blur (pseudoklasa)?źródło
Jeśli chcesz wyświetlić coś tylko po najechaniu kursorem na coś innego, możesz użyć
selector:not(:hover)
lubię to:
section{ font-size:3em; } div:not(:hover) + section{ display:none; }
<div>Hover on me</div> <section>Peek A Boo!</section>
Istnieje kilka niezwykłych efektów i rezultatów
:not()
, o których należy pamiętać::not(:not(...))
,:not(p::before)
Nie jest możliwe:not(*)
oczywiście nigdy nie zostałyby zastosowane:not(.foo)
dopasuje wszystko, co nie jest.foo
, w tym tagi, takie jak<HTML>
i<body>
#foo:not(#bar)
będzie pasował do tego samego elementu co prostszy#foo
, ale ma większą specyficzność.and
praca z:not
:<div>
i nie są<span>
elementami:body :not(div):not(span){}
or
operacja z:not
, to nie jest jeszcze dobrze obsługiwane..crazy
lub.fancy
:body :not(.crazy, .fancy){}
Źródło MDN
źródło
a { /*styles*/ }
jest zwykłym (odsyłaczem niewymienionym)
a:hover { /*styles*/ }
jest linkiem najechanym kursorem
źródło