Opera fails to recognize background hover transitions on links

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!

Answer №1

It seems like the issue may lie in not specifying the initial background color, causing Opera to struggle when trying to transition from undefined to rgba(255,0,50,0.10). To resolve this, consider setting the background color to transparent black initially...

a, a:active, a:visited, a:hover {
  /*your current css*/
  background: rgba(0,0,0,0);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the versatility of Bootstrap 4's grid system with varying column widths

I am encountering an issue with div alignment in my code. The first two col-3 classes seem to have different widths than the next two col-3 classes, causing elements to appear unaligned. Here is the code snippet: <link href="https://stackpath.bootstr ...

After the decimal point, there are two digits

My input field is disabled, where the result should be displayed as a product of "Quantity" and "Price" columns ("Quantity" * "Price" = "Total"). However, I am facing an issue where the result often displays more than 2 digits (for example: 3 * 2.93), desp ...

Retrieving HTML source code using PyGTK WebKit

Can anyone help me with this issue I am facing in my code? When I try to get the HTML source code of the current page, all I get is 'GString at 0x8875130'. How can I convert this into actual text that contains HTML? import gi gi.require_version( ...

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

Creating whimsical freehand drawings using the 'pixie' feature in fabricjs

I am currently working on developing an 'Eraser' tool for my drawing application based on fabric.js. The goal is to create a free drawing app with a 0.5 opacity where the background image remains visible through the drawings. However, I have rea ...

Adjust the filter settings in angularJS

I am working on a request page with three buttons: Open, Close, and All. Currently, when the page is opened, it displays the 'All' requests by default. However, I want to change this to show the 'Open' requests instead. I want users to ...

Tips for customizing the appearance of the span tag within the option text of an HTML select

Unique Link In my current situation, I am facing an issue where the asterisk in the first option of my HTML select element should be displayed in red color. Despite my efforts to style it, the asterisk always appears in the default black color. I have pr ...

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

What is the best way to set the width of a w2grid to 100%

Has anyone tried using w2grid before? I'm having trouble figuring out how to make it fill its container 100%. Here's the HTML snippet: <div id="a" style="width:100%"> <!-- top left container--> <div>This ...

What is the best way to adjust the minimum width of the HTML5 progress element?

There is a similar question which addresses input elements having a minimum width determined by the size parameter. I am attempting to create a layout with an inline-flex element with a flex-direction: column property like this: .item { border: 1px s ...

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

Generating an HTML report that includes a header and footer on every page using Firefox

I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...

Is there a way to activate the width styling from one class to another?

I have these 2 elements in my webpage: //1st object <span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span> //2nd object <div id="waveform"> <wave style="display: block; position: relative; user-select: none; he ...

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

Data structure designed specifically for a drawing tool application

Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...

Choose from a variety of video play options

Being new to javascript, I've successfully combined two functions that control video playback, but they seem to be conflicting with each other. The first function is designed to offer custom pause and play controls for the video // VIDEO CONTROLS STA ...

Simple steps for integrating JavaScript ads into your WordPress website

Received an advertisement from my client, a 300x250 ad in ad folder consisting of 1 HTML file, 1 JavaScript file, and 1 images folder. Questioning how to integrate these files into the side panel of my Wordpress website's homepage. I've spent a ...

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...