Existe uma pseudoclasse CSS oposta a: hover?

87

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.

RockPaperLz- Mask it or Casket
fonte
1
Em vez disso, element:not(:hover)use element.
lmgonzalves de
5
@lmgonzalves Isso não funcionará; isso forçará o estilo em estados pairado e não pairado.
RockPaperLz- Mask it or Casket
Porque não :not(:hover)?
Oriol
@Oriol Somente porque não é tão limpo quanto uma pseudoclasse não negada e porque pode ser computacionalmente mais caro do que uma pseudoclasse projetada para esse propósito.
RockPaperLz- Mask it or Casket

Respostas:

139

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
}

Caso contrário ... simplesmente use a lógica padrão:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}
Roko C. Buljan
fonte
Sua primeira frase (presumindo que esteja correta!) Soa como a resposta. Obrigado! Não consegui encontrar uma pseudoclasse CSS apropriada, porque ela (ainda) não deve existir. Os exemplos que você forneceu não se aplicam ao que estou trabalhando, mas são muito úteis e úteis, independentemente. Eu me pergunto o quão caro esse primeiro exemplo seria, já que corresponde a quase tudo. Alguma ideia?
RockPaperLz- Mask it or Casket
@RockPaperLizard bem, se você usar 1000 elementos filhos, o im pode ficar um pouco lento jsbin.com/hazega/1/edit?html,css,output caso contrário, 100, 200 elementos devem funcionar muito bem.
Roko C. Buljan
Obrigado. Funciona para :not(:disabled)também e suponho que muitos outros atributos semelhantes.
Sem Reembolsos Sem Devoluções
3

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 :enabledou :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 :hoversã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 :hoverfoi 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 :focusvez de :hover, mas o mesmo princípio se aplica): O CSS tem um seletor: blur (pseudo-classe)?

BoltClock
fonte
1

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>
  • aumenta a especificidade de uma regra, por exemplo: #foo:not(#bar)vai corresponder ao mesmo elemento que o mais simples #foo, mas tem uma especificidade maior.

andoperação com :not:

  • Elementos que não são <div>e não são <span>elementos: body :not(div):not(span){}

oroperação com :not, isso ainda não é bem suportado.

  • Elementos que não são .crazyou .fancy:body :not(.crazy, .fancy){}

Fonte MDN

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

é um normal (link não flutuante)

a:hover {
  /*styles*/
} 

é um link flutuante

nikola_wd
fonte
2
Isso não é exato. O primeiro definirá o estilo do item, quando pairado e não pairado, a menos que o segundo também seja especificado. Independentemente disso, o primeiro é aplicado em ambos os estados e o segundo apenas o substituirá em um dos dois estados.
RockPaperLz- Mask it or Casket
Você está certo sobre isso. Mas é assim que é feito e também a única maneira de fazê-lo com css. O que você realmente deseja alcançar?
nikola_wd
Obrigado. Eu adicionei um comentário que responde à sua pergunta na seção de perguntas principais acima porque outro usuário do SO fez a mesma pergunta que a sua.
RockPaperLz- Mask it or Casket