Efeito Desbotamento no Link Hover?


134

em muitos sites, como http://www.clearleft.com , você notará que, quando os links passarem o mouse, eles ficarão com uma cor diferente, em vez de mudar imediatamente, a ação padrão.

Eu assumo que o JavaScript é usado para criar esse efeito, alguém sabe como?


1
Obrigado. Agora, eu entendo como criar links de foco, é apenas o que estou tentando descobrir como criar um efeito mais suave para meus links de foco.
Miles Henrichs

Respostas:


327

Atualmente, as pessoas estão apenas usando transições CSS3 porque é muito mais fácil do que mexer com JS , o suporte ao navegador é razoavelmente bom e é apenas cosmético, portanto, não importa se não funciona.

Algo assim faz o trabalho:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

Você também pode fazer a transição de propriedades CSS específicas com diferentes horários e funções de atenuação, separando cada declaração com uma vírgula, da seguinte maneira:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Demonstração aqui


@AndreiCristof: Felizmente trabalha no IE10 ! Nenhum prefixo de fornecedor também é necessário (o que é estranho).
Marcel

Eu testei ambos e espero que encontrei a razão correta para que o CSS não seja suave e fluente como o jQuery. Por favor me corrija se eu estiver errado.
Qmaster

Você é demais! Bem explicado, me ajudou muito ao vê-lo.
Plast1K

Meu teste é com uma imagem, não um link.
1013 Felipe

@FelipeMicaroniLalli melhor para postar uma pergunta, eu acho, definitivamente soa como um problema de sintaxe.
Marcel

9

Eu sei na pergunta que você declara "Eu assumo que o JavaScript é usado para criar esse efeito", mas o CSS também pode ser usado, um exemplo está abaixo.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

E aqui está um JSFIDDLE para o código acima!


Marcel, em uma das respostas, indica que você pode "fazer a transição de várias propriedades CSS", também pode usar "all" para afetar o elemento com todos os seus estilos: pairar como abaixo.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

E aqui está um JSFIDDLE para o exemplo "all"!


6

Você pode fazer isso com o JQueryUI:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/


Você não precisa jqueryui para que, assim jquery
Juan

6
@ Juan Não, o jQuery pode apenas animar "valores numéricos únicos", cujas cores não são (consulte api.jquery.com/animate/#animation-properties ). Mas você realmente não precisa de toda a biblioteca jQueryUI, apenas o plug-in jQuery.Color, que por acaso está incorporado ao jQueryUI.
Niclas Sahlin

@Niclas Sahlin. Encontrei seu violino procurando por transições CSS. Sua transição JQuery-UI é muito mais suave, tenho certeza de que os usuários perceberão isso.
RubyRube 6/06

1
Existem soluções com CSS, que é a maneira mais fácil de implementar
mhenkel

2

Tente isso em seu css:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
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.