Firefox中:hover与:visited伪类样式冲突问题求助——已访问元素hover状态异常

I've run into this exact issue with Firefox before—turns out it handles the order of pseudo-class rules a bit differently than Chrome, which causes that weird intermediate blue flash when hovering a visited link. Let's break down the problem and fix it.

The Root Cause #

Your original CSS has the .button:visited:hover rule placed before .button:hover. Since both selectors have the same specificity (class selector + single pseudo-class), Firefox applies the later rule first when hovering a visited element—so it briefly shows the blue from .button:hover before the red from .button:visited:hover kicks in. Chrome handles this order more intuitively, but Firefox sticks strictly to the "last rule wins" principle here.

The Fix #

Adjust the order of your CSS rules to place .button:visited:hover after .button:hover. This ensures the visited hover style takes precedence when applicable. Here's the corrected code:

.button { 
  background-color: black; 
  padding: 10px; 
  text-decoration: none; 
  transition: background-color 0.5s ease; 
}
.button:hover { 
  background-color: blue; 
}
.button:visited { 
  background-color: green; 
}
.button:visited:hover { 
  background-color: red; 
}

Why This Works #

• For unvisited buttons: The default black background switches to blue on hover, exactly as you want.
• For visited buttons: The default green background will directly switch to red on hover, no intermediate blue—since .button:visited:hover comes after .button:hover, its style overrides the generic hover rule for visited links.

Just a quick note: Browsers have privacy restrictions on :visited (to prevent scripts from detecting if a user has visited a link), but background-color is one of the allowed properties, so this fix is safe and compliant.

内容的提问来源于stack exchange，提问作者Anonymous