How to specify a time in the color change with: hover?

Question

How to specify a time in the color change with: hover?

Navigation

#1 by (5 votes)

6

<a href="#">link</a>

a:hover{
 color:blue;
}

With this script I can change the color of the text "link" when the mouse passes over, but the color changes instantly. I wanted the color change to be smooth, a little slow. How do I do this?

html css

asked by anonymous 31.08.2018 / 23:57

1 answer

Why can not I see the icon code (❌) in developer mode? Why do these two ways of initializing the same list in Python generate structures of different sizes?

score 5 · Accepted Answer

Just use transition :

transition: color .7s;

              ^    ^--- tempo que vai durar
              |
               -- propriedade que quer suave

Warning for a detail: In your case (and most of them) you will apply transition to the original item, not affected by :hover .

If you want with images, you have an example here:

Transition with fade between sprites p>

Demonstration:

a{
  color:red;
  transition: color .7s;
}

a:hover{
  color:blue;
}

<a href="#">Faça o hover aqui neste link</a>