Slow link hover highlighting

I remember being on forums where the links actually highlight slower, which I think is nicer than the default effect of instant color-changing on hover.

Anyone know how it's done? I think it might be done through webkit and moz CSS codes actually. They didn't work in IE and I think that's because IE doesn't support transitional effects like that yet.

You can add these.

Code:


-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

Thanks for that share. I'm still learning about the moz and webkit codes as they're the browser-specific ones.

Anyway, I changed the code a bit to work on all links with no underline and 750 millisecond transition. Came out with this :

Code:

a:hover {
  -webkit-transition: all 750ms ease;
  -moz-transition: all 750ms ease;
  -ms-transition: all 750ms ease;
  -o-transition: all 750ms ease;
  transition: all 750ms ease;
  text-decoration: none !important;
}

Now, follow-up question :

Is there a way to get them to ease-out nice as well? There's no "mouse-out" CSS code so would that be much more complicated to implement?

Edit : Looking online, most people just say it isn't possible and say that JavaScript is just about the only way.

I believe so.

Alright. If anyone has any ideas to share about this then please do.

Otherwise, if 48 hours pass with no reply, I'll mark it as solved. This isn't really a big deal after all, it just would have been nice to have it ease-out along with the ease-in. Hope they introduce a mouse-out feature to CSS sometime.

Looks like you confused your [code] and [color] tags there

Well derp, I feel like I should have known this.

Thank you very much Rideem. Thread marked as solved.