Qual é o oposto de: pairar (ao sair do mouse)?


115

Existe alguma maneira de fazer o oposto de :hover usar apenas CSS? Como em: se :hoverfor on Mouse Enter, há um CSS equivalente a on Mouse Leave?

Exemplo:

Eu tenho um menu HTML usando itens de lista. Quando passo o mouse sobre um dos itens, há uma animação em cores CSS de #999a black. Como posso criar o efeito oposto quando o mouse sai da área do item, com uma animação de blacka #999?

jsFiddle

(Lembre-se de que não desejo responder apenas a este exemplo, mas a toda a questão do "oposto de :hover".)


O que exatamente você está tentando fazer? Talvez haja uma alternativa diferente?
Moin Zaman

14
O oposto de :hoveré simplesmente :not(:hover); entretanto, não:hover é sinônimo de nem igual a . CSS não tem nenhum conceito de eventos DOM. onmouseenter:not(:hover)onmouseleave
BoltClock

1
@Cthulhu: :hoversignifica simplesmente "um elemento que tem um ponteiro do mouse sobre ele". Não indica se o ponteiro do mouse fez a transição de outro elemento para este elemento. Significa apenas que o ponteiro do mouse está atualmente no elemento.
BoltClock

1
@BoltClock: não (: hover) realmente nada seria acionado?
Moin Zaman

5
@Moin Zaman: Sim. Contanto que o mouse não esteja sobre um determinado elemento, ele :not(:hover)será aplicado. Aqui está uma demonstração: jsfiddle.net/BoltClock/rghBX
BoltClock

Respostas:


93

Se bem entendi, você poderia fazer a mesma coisa movendo suas transições para o link em vez do estado de foco:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

A definição de pairar é:

O seletor: hover é usado para selecionar elementos quando você passa o mouse sobre eles.

Por essa definição, o oposto de pairar é qualquer ponto em que o mouse não esteja sobre ele. Alguém muito mais inteligente do que eu fez este artigo, definindo diferentes transições em ambos os estados - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

1
"(Lembre-se de que não desejo responder apenas a este exemplo, mas a toda a questão do" oposto de: pairar ".)"
Cthulhu

1
@Cthulhu - Eu editei minha resposta agora. Isso pode ajudar um pouco mais. Achei que era uma resposta muito óbvia.
SpaceBeers

1 por me apontar na direção certa. Eu estava tendo uma discrepância de animação entre os navegadores. O Chrome estava tornando tudo mais suave, mas eu tinha um .1s diferentes nas transições e o Mozilla e o IE exibiam o erro. Consegui consertar combinando meus números de transição.
Termato

Ugh. A 'definição' :hoverque você citou é da W3Schools, que não é de forma alguma uma fonte confiável. A especificação real pode ser encontrada em w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes , embora não seja a explicação mais acessível.
Mark Amery de

22

Basta usar transições CSS em vez de animações.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Demonstração ao vivo


Como eu disse no exemplo, meu problema não é com a animação, mas com a parte "ao deixar o mouse".
Cthulhu

5
A transição funciona tanto ao passar o mouse quanto ao sair do mouse. Basta especificar estilos para o estado normal e o :hoverestado.
Marat Tanalin de

5

Não, não há propriedade explícita para a licença do mouse em CSS.

Você pode usar: hover sobre todos os outros elementos, exceto o item em questão, para obter esse efeito. Mas não tenho certeza de como isso seria prático.

Acho que você tem que olhar para uma solução JS / jQuery.


JS não é necessário neste caso, e eu o desencorajaria agora, embora seja uma justificativa de desempenho.
Alex Chamberlain

Não é necessário para o exemplo acima, mas parece ser a melhor solução para todo o problema de "saída do mouse".
Cthulhu


1

Embora as respostas aqui sejam suficientes, eu realmente acho que o exemplo da W3Schools sobre esse assunto é muito simples (ele esclareceu a confusão (para mim) imediatamente).

Use o :hoverseletor para alterar o estilo de um botão ao mover o mouse sobre ele.

Dica: use a propriedade transit-duration para determinar a velocidade do efeito "hover":

Exemplo

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

Em resumo, para transições em que você deseja que as animações de "entrada" e "saída" sejam as mesmas, é necessário empregar transições no seletor principal em .buttonvez de no seletor de foco .button:hover. Para transições em que deseja que as animações de "entrada" e "saída" sejam diferentes, você precisará especificar diferentes transições do seletor principal e do seletor de foco.


1

Coloque seu tempo de duração na seleção sem foco:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

1

Basta adicionar uma transição ao elemento com o qual você está mexendo. Esteja ciente de que pode haver alguns efeitos quando a página carrega. Como se você fizesse uma mudança no raio da borda, você verá quando o dom carregar.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}


0

Você entendeu mal :hover; diz que o mouse está sobre um item, em vez de o mouse acabou de entrar no item.

Você pode adicionar animação ao seletor sem :hoverobter o efeito desejado.

Transições é uma opção melhor: http://jsfiddle.net/Cvx96/


1
Seu violino não produz o resultado pretendido.
Govind Rai

0

O oposto de :hoverparece ser :link.

(edit: não tecnicamente um oposto, porque existem 4 seletores :link, :visited, :hovere :activeCinco se você incluir. :focus).

Por exemplo, ao definir uma regra .button:hover{ text-decoration:none }para remover o sublinhado em um botão, o sublinhado aparece quando você rola o botão para fora em alguns navegadores. Eu consertei isso com.button:hover, .button:link{ text-decoration:none }

É claro que isso só funciona para elementos que são realmente links (têm o atributo href)


Sua informação está incorreta. :linkapenas seleciona links, simples assim. Veja aqui a definição de :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink
Cthulhu

@ Strive55 Ahhh, obrigado, isso faz sentido. O link que você forneceu afirma que "Para estilizar os links de forma adequada, você precisa colocar a regra: link antes das outras, conforme definido pela ordem LVHA:: link -: visitado -: pairar -: ativo." Se bem entendi, isso significa que se nenhum dos outros seletores se aplicarem (: visitado,: hover ou: ativo) então: link é o que se aplica. Não é tecnicamente o oposto, porque são 4, mas ainda funciona
scripter

0

Basta adicionar uma transição e o nome da animação na classe inicial, no seu caso, ul li a, basta adicionar uma propriedade "transição" e isso é tudo que você precisa

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.