How to specify a time when changing colors with :Hover?

Asked

Viewed 376 times

6

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

a:hover{
 color:blue;
}

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

html css

1 answer

5


Just use transition:

transition: color .7s;

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

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


If you want images, there’s an example here:

Transition with fade amid sprites


Demonstration:

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

a:hover{
  color:blue;
}
<a href="#">Faça o hover aqui neste link</a>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.