Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS 3 fade animation on hover - issue in Opera

CSS 3 fade animation on hover - issue in Opera

Problem

So I have these rules:

a{
  background-color: transparent;
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition: background-color .3s ease-in-out;
  -o-transition: background-color .3s ease-in-out;
  -ms-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
}

a:hover{
 background-color: #fff;
}

which are supposed to make the browser fade in/out a white background on mouse over.

It works in Chrome and Firefox, but in Opera it fades from a grey color to white, instead of transparent to white...

How can I fix that?

Thank you

Problem courtesy of: Alex

Solution

I don't know the answer to your explicit question, but maybe if you transition from rbga rather than from transparency?

a{
  background-color: rgba(255,255,255,1);
}
a:hover{
  background-color: rgba(255,255,255,0);
}
Solution courtesy of: Steve Perks

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS 3 fade animation on hover - issue in Opera

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×