The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Slow link hover highlighting

View previous topic View next topic Go down

Solved Slow link hover highlighting

Post by Alexander Moore on February 17th 2013, 2:22 pm

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.


Last edited by Alexander Moore on February 18th 2013, 12:00 am; edited 1 time in total

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: Slow link hover highlighting

Post by Sanket on February 17th 2013, 2:39 pm

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;

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Slow link hover highlighting

Post by Alexander Moore on February 17th 2013, 3:29 pm

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.

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: Slow link hover highlighting

Post by Sanket on February 17th 2013, 7:43 pm

I believe so.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Slow link hover highlighting

Post by Alexander Moore on February 17th 2013, 8:41 pm

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.

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: Slow link hover highlighting

Post by Alexander Moore on February 17th 2013, 11:59 pm

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

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

Thank you very much Rideem. Thread marked as solved.

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum