Troubleshooting a Hover Problem in Firefox

Chrome is rendering the following code perfectly fine, but Firefox seems to be having trouble applying the hover effect.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div>
        <a href="http://www.w3schools.com/cssref/pr_background-image.asp">
        1 Link
        </a>
        </div>
    </body>
</html>

CSS

a:Link {
text-decoration:none;
color:#008B45;
}
a:hover {
color:black;    
}
a:visited {
color:#EE9A00;   
}

Do you have any suggestions for resolving this issue?

htmlcssgoogle-chromefirefox

Answer №1

You have checked out the link using Firefox.

When it comes to CSS styling, the :visited rule takes precedence over the :hover rule.

To ensure that your hover style is applied to visited links as well, make sure to rearrange your CSS code so that :hover comes after :visited.

Answer №2

Ensure hover state is set after visited for it to take effect

a:Link {
text-decoration:none;
color:#008B45;
}
a:visited {
color:#EE9A00;   
}
a:hover {
color:black;    
}

Visit this link for a demonstration

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

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

javascripthtmlnode.js

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how ...

javascriptjqueryhtmlcss

The CSS "mask" property is experiencing compatibility issues on Google Chrome

Hey there! I've recently developed a unique progress bar component in React that showcases a stunning gradient background. This effect is achieved by utilizing the CSS mask property. While everything runs smoothly on Firefox, I'm facing a slight ...

cssreactjstypescriptgoogle-chrome

Dynamically pass specific outputs from multiple SQL queries to a form

The query is functioning properly, returning a table with the associated data in rows. I am looking to have a button displayed with each row that triggers a function specific to that row when clicked. Currently, the function works manually by inputting the ...

phphtmlsqlmysqli

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

javascriptjqueryhtmlajax

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

javascriptjqueryhtmlcss

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

htmlcss

Is there a way to showcase images next to each other within an array in Angular 8, like having 2 images in a row and then another 2 in the next row?

Here is the HTML code I created and tested: <div class="row"> <div *ngFor="let url of urls" class="col-md-6"> <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"> </div> < ...

htmlcssbootstrap-4angular8

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...

javascriptjquerycss

Lock the first row and a few lines in place for an HTML table

I'm facing a layout challenge on my webpage. I have a header line followed by a table, and I want both the header line and the top row of the table to be frozen while allowing the rest of the table to scroll. Despite trying to use 'position:fixed ...

htmlcss

What is the method for verifying whether x-iframe-options ALLOW-FROM is supported?

How can I determine if my browser supports X-IFRAME-OPTIONS and X-IFRAME-OPTIONS ALLOW-FROM in the http header, either through client-side or server-side methods? ...

html

Is it possible to bypass the confirmation page when submitting Google Form data?

Is there a way to bypass the confirmation page that appears after submitting a form? What I would like is for the form to simply refresh with empty data fields and display a message saying "your data has been submitted" along with the submitted data appea ...

javascriptphphtmlforms

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

javascripthtmlcsstypescriptsaas

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any sug ...

javascripthtmlcsstogglegetelementsbytagname

How can I add an SVG tooltip that appears when I hover my

I have successfully implemented an SVG map showing marked locations and polygons, with CSS styling that makes the areas stand out on hover. I achieved this without using any JavaScript code. My next goal is to create a hovering window or tooltip that disp ...

javascriptjqueryhtmlcsssvg

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

javascripthtmlbuttondom-events

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

Creating a credit card input field that switches cursor after reaching maximum number length and focuses on previous field when deleting with backspace. (function ($) { $(".nmipay-input-field").keyup(function () { if (this.value.l ...

htmljquery

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

Why do elements align horizontally in a div even when I specify it to display as a block?

My understanding is that display: block is the default setting. However, even after specifically setting display: block, my div was still aligning items horizontally. The only solution I found was to use: display: flex; flex-direction: column; Any insight ...

htmlcss

Is there a way to showcase XML in a web browser while maintaining its whitespace and preserving its preformatted text?

In an attempt to simplify the process of formatting my reports, I am considering creating a basic XML language. This would resemble something like this: <?xml-stylesheet href="./report.css"?> <report> <title>A Tale of Two Cities</ ...

htmlcssxmlbrowserwhitespace