Can a:hover over-ride a:visited?

[celicasaur]

I've made this little menu bar where a small image appears on rollover. When the link has been clicked, I want a different image to display via the a:visited property (which it does). However, when the user re-hovers over the same link on the original screen, i want the standard image to still over-ride the visted image...does that make sense to you?

Here's a link to the site, so you can see what I mean:
http://www.conso-mail.com/SiteRender.aspx?SiteID=4&themeid=4

Here's relevant code:

#FooterNav li a:hover {
color: #999;
background-image: url('http://images.acxiomonline.com/images/rrahma/FR/Sub-page-box-triangle.gif');
}
#FooterNav li a:visited {
color: #ccc;
background-image: url('http://images.acxiomonline.com/images/rrahma/FR/Sub-page-box-tick.gif');
}

Any ideas guys?

[boebarl1]

Have you tried different browsers?

[spyderfx]

I'm not sure of what you are trying to do but have you tried switch a:visited for a:active instead? I think this might solve your problem.

[icio]

There's a tag/command/keyword (I'm actually not sure -- directive, possibly?) in CSS: !important, which means that properties aren't overwritten. i.e.

#FooterNav li a:hover {
color: #999;
background-image: url('http://images.acxiomonline.com/images/rrahma/FR/Sub-page-box-triangle.gif') !important;
}
#FooterNav li a:visited {
color: #ccc;
background-image: url('http://images.acxiomonline.com/images/rrahma/FR/Sub-page-box-tick.gif');
}
Though my personal preference is to try and structure things so that they're not required.

Thought: Try putting the a:visited first.

Hope that helps :thumb:

[celicasaur]

Have you tried different browsers?

Yeah no, same problem on different browsers.


I'm not sure of what you are trying to do but have you tried switch a:visited for a:active instead? I think this might solve your problem.

a:active is what appears once the button is clicked...thanks for the suggestion though.


There's a tag/command/keyword (I'm actually not sure -- directive, possibly?) in CSS: !important, which means that properties aren't overwritten.

Hope that helps :thumb:

And the winner is.... :fab: Thanks buddy - this is the solution to the problem.

The !important; command over rides the visited command and it appears as I like it.

Thanks for your help - much appreciated :)

[icio]

Out of interest, did you try putting the :active statement after the :visited statement (without using !important)? If you read up on how the browser is supposed to assign priority to attributes I'm pretty sure the order is taken into account.

[celicasaur]

Indeed sir, I did actually try that before the !important statement, but sadly it didn't want to listen.

It looks pretty good now :D

[icio]

Well that's a shame. Glad that you got it working in the end anyway! :thumb: