/    Sign up×
Community /Pin to ProfileBookmark

a:link a:hover – using !important not working in FF

Copy linkTweet thisAlerts:
Feb 06.2008

I have several different styles (with alternatives for a:link a:hover a:active a:visited etc) in my site/stylesheet.

However, setting the “a:hover { color: #00CC33!important; } ” element on my styles isn’t working… tested in both IE and Firefox and neither is doing what I want.

Its worth noting I have several different styles each with their own hover/link attributes… but each link when viewed is reverting to the ‘visited’ state (which happens to be the same as the ‘link’ state – whether this is advisable or not isn’t the question ? )

Is there something else I should be doing to ensure the ‘hover’ colour of my links always shows what is says in the stylesheet for ‘hover’ other than putting !important into the style??

Help!
LP

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@yamaharussFeb 06.2008 — Did you know that the hover event must be the last one (at the bottom)?
Copy linkTweet thisAlerts:
@LouPhiauthorFeb 06.2008 — Hi - no I didn't! ...and I thought I had this CSS thing cracked! Obviously not.

Just re-ordered my stylesheet and guess what - it fixed it!

Thanks so much for that.. simple when you know how isn't it? ?

LouPhi
Copy linkTweet thisAlerts:
@WebJoelFeb 06.2008 — "a:hover { color: #[B]00CC33!important[/B]; } "[/QUOTE] You are going to want to seperate this with a whitespace after the last "3" and before the "!" or it will be parsed as one value.

The correct order of precidence for psuedo-states are

a {...}

a:link {...}

a:visited {...}

a:hover {...}

a:active {...}

Think "[B]L[/B]o[B]VHA[/B]te"

This makes it so you aren't getting one psuedo-state incorrectly listed before it is called (e.g., shows the visited color before the active ("mousedown") color, etc.).

Styling should also include a state for [I]non-pointertool[/I] (such as for TAB keys, etc. for the handicapped), called "a:[B]focus[/B]". This has the same indentical value as "a:hover", so combine them:

a {...}

a:link {...}

a:visited {...}

[B]a:focus[/B], a:hover {...}

a:active {...}

and here (if you are a Star Wars fan), you can think:

"[B]L[/B]ord [B]V[/B]ader's [B]F[/B]ormer [B]H[/B]andle [B]A[/B]nakin"
Copy linkTweet thisAlerts:
@LouPhiauthorFeb 06.2008 — Wow! So much information... so much help.

Thanks for all the advice and tips - I will digest and remember ALWAYS!

This forum has been a saviour for me already, and I've only been using it (properly) for about a week!

Thanks again

LouPhi
Copy linkTweet thisAlerts:
@bikram_bjFeb 12.2008 — I have several different styles (with alternatives for a:link a:hover a:active a:visited etc) in my site/stylesheet.

However, setting the "a:hover { color: #00CC33!important; } " element on my styles isn't working... tested in both IE and Firefox and neither is doing what I want.

Its worth noting I have several different styles each with their own hover/link attributes... but each link when viewed is reverting to the 'visited' state (which happens to be the same as the 'link' state - whether this is advisable or not isn't the question ? )

Is there something else I should be doing to ensure the 'hover' colour of my links always shows what is says in the stylesheet for 'hover' other than putting !important into the style??

Help!

LP[/QUOTE]
iam having the same problem, that iam using a li:hover in drop down menu instead of using a:hover.

IE7 works but not in IE6.. now the whole application depend on this menu. please give some help that i can change the drop down menu to workable application.
Copy linkTweet thisAlerts:
@KorFeb 12.2008 — IE6 has not implemented the complete CSS 2 and uses :hover pseudo-class only for links (for A tags). A solution is to insert a link inside the list
<i>
</i>&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;

<i>
</i>&lt;style type="text/css"&gt;
li a{
text-decoration:none;
color:#000000;
}
li a:visited{
color:#000000;
}
li a:hover{
color:#ff0000;
}
&lt;/style&gt;
×

Success!

Help @LouPhi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...