Existe uma pseudo classe em CSS para especificar
:not(:hover)
Ou essa é a única maneira de especificar um item que não está sendo pairado?
Passei por várias referências CSS3 e não vejo nenhuma menção de uma pseudo classe CSS para especificar o oposto de: hover.
css
css-selectors
pseudo-class
RockPaperLz- Mask it or Casket
fonte
fonte
element:not(:hover)
useelement
.:not(:hover)
?Respostas:
Sim use
:not(:hover)
.child:not(:hover){ opacity: 0.3; }
jsBin demo
Outro exemplo; Eu acho que você quer: "quando um está pairando, escurecer todos os outros elementos" .
Se minha suposição estiver correta, e supondo que todos os seus seletores estejam dentro do mesmo pai:
.parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{ opacity: 1; // Not the hovered one }
Exibir trecho de código
.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>
Caso contrário ... simplesmente use a lógica padrão:
.child{ opacity: 0.2; } .child:hover{ opacity: 1; }
fonte
:not(:disabled)
também e suponho que muitos outros atributos semelhantes.Não existe tal pseudo-classe. Não precisa haver, quando você pode apenas usar
:not(:hover)
. O objetivo da:not()
pseudoclasse é permitir que os autores escrevam negações sem ter que especificar negações separadas de cada pseudoclasse dinâmica existente (e futura) em que um elemento só pode corresponder ou não à pseudoclasse.Por exemplo, apenas alguns elementos podem ser
:enabled
ou:disabled
- a maioria dos elementos não é porque a semântica simplesmente não se aplica - mas um elemento só pode ser designado pelo dispositivo apontador (:hover
) ou não (:not(:hover)
). Fornecer negações que já podem ser alcançadas diretamente usando:not()
prejudicaria muito sua utilidade (embora ainda pudesse ser usado para negar qualquer outro seletor simples - ou seletores complexos inteiros no futuro).O argumento de que tal pseudoclasse seria computacionalmente menos caro é bastante fraco. A implementação mais ingênua de tal pseudoclasse seria uma
:not(:hover)
verificação literal , o que não seria melhor. Qualquer implementação mais complexa ou otimizada e você está pedindo aos fornecedores para implementar uma pseudoclasse que seja tão rápida quanto ou até mais rápida do que:not(:hover)
, algo que já é incomum o suficiente para um caso de uso, considerando as outras opções que você tem, como cascata e:not(:hover)
(para sempre que a cascata não for uma opção) que você tenha acesso imediato. Simplesmente não justifica o tempo e esforço para especificar, implementar e testar uma alternativa a pelo menos um outro método existente que seja 100% funcionalmente equivalente (e que se aplique a pelo menos80% dos cenários). E há também o problema de nomear essa pseudo-classe - você não propôs um nome para ela, e também não consigo pensar em um bom.:not-hover
é apenas mais curto em dois bytes e apenas marginalmente menos trabalho para digitar. Na verdade, é potencialmente mais confuso do que:not(:hover)
.Se você está preocupado com a especificidade, observe que a
:not()
própria pseudoclasse não é considerada para especificidade; apenas seu argumento mais específico é .:not(:hover)
e:hover
são igualmente específicos. Portanto, a especificidade também não é um problema.Se você estiver preocupado com o suporte do navegador, tal pseudo classe, se introduzida, provavelmente teria sido introduzida juntamente
:not()
ou em um nível posterior dos Seletores, uma vez que não apareceu no CSS2 (onde:hover
foi introduzido pela primeira vez há mais de 17 anos atrás, e implementado pela primeira vez no IE4 outro ano antes). Introduzi-lo em um nível posterior seria inútil porque os autores seriam simplesmente forçados a continuar usando:not(:hover)
até que os navegadores comecem a implementar essa nova pseudo classe de qualquer maneira, e eles não teriam razão para mudar.Observe que isso não é o mesmo que a seguinte pergunta, que fala sobre eventos versus estados (é originalmente sobre, em
:focus
vez de:hover
, mas o mesmo princípio se aplica): O CSS tem um seletor: blur (pseudo-classe)?fonte
Se você quiser exibir algo apenas ao pairar sobre outra coisa, você pode usar
selector:not(:hover)
como isso:
section{ font-size:3em; } div:not(:hover) + section{ display:none; }
<div>Hover on me</div> <section>Peek A Boo!</section>
Existem vários efeitos e resultados incomuns ao usar
:not()
que você deve ter em mente::not(:not(...))
,:not(p::before)
não é possível:not(*)
obviamente nunca seria aplicado:not(.foo)
corresponderá a qualquer coisa que não seja.foo
, incluindo tags como<HTML>
e<body>
#foo:not(#bar)
vai corresponder ao mesmo elemento que o mais simples#foo
, mas tem uma especificidade maior.and
operação com:not
:<div>
e não são<span>
elementos:body :not(div):not(span){}
or
operação com:not
, isso ainda não é bem suportado..crazy
ou.fancy
:body :not(.crazy, .fancy){}
Fonte MDN
fonte
a { /*styles*/ }
é um normal (link não flutuante)
a:hover { /*styles*/ }
é um link flutuante
fonte