Is there a glitch in Firefox with the :active pseudo class?

Check out this example here: https://codepen.io/anon/pen/zzrdmo

I'm having trouble with the click effect using the :active pseudoclass on an icon inside a div in Firefox. When I click and then unclick the div, it stays clicked...

If I remove the relative position in the :active pseudoclass, it works fine but without the desired effect... This issue seems to only happen in Firefox as Chrome, Safari, etc work correctly. Does anyone know why?

Thank you.

UPDATE: The solution to this problem can be found in the first answer. By adding 'position: relative' (without specifying top) to the hover state rule, the issue is fixed." - @Johannes Thanks!

Answer №1

:active refers to the state when a link is clicked and the browser begins loading the new page while still displaying the old one. Typically, this transition is so quick that it goes unnoticed, leading many designers to apply the same CSS styles to both active and hover.

In cases where the source and target pages are identical, such as with internal links, different browsers may interpret the active status differently. Some may consider the link as having loaded a new page, while others may see it as still being on the original page (thus remaining active)...

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

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

How to Align Pictures in an Unordered List

I'm having trouble centering these images within the UL element. Despite researching solutions from other sources, I can't seem to apply them successfully in my specific case. Any assistance would be greatly appreciated. Thank you. JSFiddle: htt ...

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking usin ...

Browser Bing Parser

After successfully creating a web parser for Google search results, I decided to implement a similar parser for Bing. However, I encountered an error that I couldn't resolve. Below is the code snippet that caused the issue: var rows = htmlDoc.Documen ...

What should be done with all the tags that have the specified attribute set to 'checked = false'?

Add tags using input type = "radio" along with the data-group attribute: <input type="radio" id="id1" data-group="group1"> <input type="radio" id="id2" data-group="group1"><br> <input type="radio" id="id3" data-group="group2"> < ...

The rows sent to HTML/Bootstrap from Java through JSON do not neatly wrap across rows evenly

I am having trouble getting images to wrap evenly on an HTML/Bootstrap page that are retrieved by Java and passed through JSON. Despite my expectations, there is a third row created with only one image and a fifth row with 3 extra images. Additionally, whe ...

Aligning SVG shapes within each other

I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle. While I found some solutions that worked for shapes like ...

What is the best way to iterate through the child elements and access the "href" attribute for additional parsing?

My current project involves creating a parser for a local real estate website using python and selenium. I have successfully identified the necessary page and now I am looking to loop through each element in a parent directory to access additional pages fo ...

The issue with HTML5 video tags on iPhone Safari is that 'a' links are not functioning correctly

For my mobile website in Safari browser, I am utilizing the html5 video tag. While the video is functioning properly, I have encountered an issue with 'a' links overlapping on top of the video. These links have been added using absolute positioni ...

Using Selenium to locate and identify content based on HTML attribute names

To confirm the presence of specific HTML content or items on a page using known unique identifiers, I am seeking to utilize Selenium (or a similar framework). While I have the ability to mark HTML tags with an attribute, I sometimes encounter situations w ...

Adding click functionality to dynamically generated list items in jQuery and HTML

I'm encountering an issue while trying to assign click events to dynamically added HTML elements in jQuery. Despite extensive research within this community, I find myself more confused than before. Below is the snippet of code causing me trouble: v ...

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() ...

`Flex alignment of columns in Bootstrap 4`

I'm feeling really lost here. I had everything figured out, but after refreshing the jsfiddle, the solution suddenly changed on me. I have a row with two columns in it, but for some reason, I can't get them to align properly on the same row. I at ...

Issues with the HTML5 progress bar malfunctioning due to alterations made by Angular

Using the html5 progress bar <progress value="5" max="100"></progress> in angular can lead to it being replaced by angular classes. Angular also has its own progress bar that uses similar tags. However, elements like the html5 slider do not get ...

Displaying a progress bar during image uploads in PHP without using AJAX

I am in the process of uploading a file on my website and it is working well. However, I would like to display a progress bar while the upload is taking place. I have considered using ajax for this purpose, but I am unable to use ajax. Is there a way to ac ...

What is the best way to access and display the innerText of elements that have been removed using console

When I call the updateCartTotal() function, my goal is to display in the console the items that have been removed from the shopping cart. Every time I click on the remove button, I want it to show the item and the price. However, instead of displaying the ...

In Bootstrap 3, you can toggle individual collapsible items without affecting others by only closing the specific

I am facing an issue with my Bootstrap collapsible elements. I came across an answer that includes the necessary javascript to close only the collapsible items in my table, while leaving other collapsible items on the page (in the menu) unaffected. These i ...

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

The responsiveness of the Bootstrap website is lacking

Viewing the site on mobile @media screen and (max-width: 600px) { .sidebar { width: 100% !important; height: auto !important; } } @ ...