One of my web design projects includes a transition that creates a rounded background that fades in when links are hovered over. Unfortunately, the transition doesn't seem to work properly in Opera, even though it functions well in Firefox, Chrome, and Safari. I suspect that the issue may lie with the states (a:hover, a:active, etc) to which I'm applying the transition.
Just to be clear, the hover effect in Opera appears correctly, but the fade-in effect is missing.
a, a:active, a:visited, a:hover {
-webkit-transition: background 200ms ease-in;
-moz-transition: background 200ms ease-in;
-o-transition: background 200ms ease-in;
-ms-transition: background 200ms ease-in;
transition: background 200ms ease-in;
text-decoration: none;
padding: 0.15em;
margin: -0.15em;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
a:hover {
background: rgba(255,0,50,0.10);
}
Another similar fade-in hover effect is applied to text items, and it works in Opera without any issues. The only difference is that the color changes instead of the background.
I would appreciate any insight or advice you can offer on this matter. Thank you!