[CSS] a:visited:hover and IE

branwen · 05-08-2005, 05:21 PM

I have been having problems with getting a visited link to changed when hovered over in IE. It works just fine in Firefox. When I look at it in IE, the hover works before it is visited, but not after. Here are some snippets of code from different links:

.nav a { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; }
.nav a:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; }
.nav a:visited:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; }
.nav a:visited { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; }
????: NamePros.com http://www.namepros.com/web-design-discussion/88753-css-a-visited-hover-and-ie.html

<--and another snippet-->

a.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }
a:active.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }
a:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; }
a:visited:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; }
a:visited.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }

<---and another...---->

a { color: #F36D00; font-weight: normal; }
a:hover { color: #F7B942; font-weight: normal; }
a:visited:hover { color: #F7B942; font-weight: normal; }
a:visited { color: #F36D00; font-weight: normal; }

None of them seem to hover visited in IE.
Thanks for any help!!!!

Rowan W · 05-08-2005, 06:39 PM

Visited comes before hover in the CSS.

a:link
a:visited
a:hover

StudioWorks · 05-08-2005, 07:57 PM

go to alistapart.com if you have more problems with CSS and links.

df-sean · 05-14-2005, 04:35 PM

Easy trick to remember the order of these pseudo-classes is:
LoVe HAte
(Link, Visted, Hover, Active)

They need to go in that order or CSS's natural cascading will cause for example "link" to supercede "visited" if you put link after visited. Just put 'em in LoVeHAte order and you'll be fine.

branwen · 05-14-2005, 10:38 PM

Thanks, everyone!

df-sean · 05-14-2005, 10:49 PM

Anytime ;-)

05-08-2005, 05:21 PM	THREAD STARTER #1 (permalink)
branwen NamePros Member Join Date: May 2005 Location: Texas Posts: 25	[CSS] a:visited:hover and IE I have been having problems with getting a visited link to changed when hovered over in IE. It works just fine in Firefox. When I look at it in IE, the hover works before it is visited, but not after. Here are some snippets of code from different links: .nav a { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; } .nav a:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; } .nav a:visited:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; } .nav a:visited { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; } ????: NamePros.com http://www.namepros.com/web-design-discussion/88753-css-a-visited-hover-and-ie.html <--and another snippet--> a.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; } a:active.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; } a:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; } a:visited:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; } a:visited.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; } <---and another...----> a { color: #F36D00; font-weight: normal; } a:hover { color: #F7B942; font-weight: normal; } a:visited:hover { color: #F7B942; font-weight: normal; } a:visited { color: #F36D00; font-weight: normal; } None of them seem to hover visited in IE. Thanks for any help!!!!

05-08-2005, 06:39 PM	#2 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	Visited comes before hover in the CSS. a:link a:visited a:hover __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

05-08-2005, 07:57 PM	#3 (permalink)
StudioWorks no one lives forever Join Date: Apr 2004 Location: NamePros Posts: 8,075	go to alistapart.com if you have more problems with CSS and links. __________________ epagini.com mexicorealty.net softwarepit.com yadasoftware.com

05-14-2005, 04:35 PM	#4 (permalink)
df-sean NamePros Member Join Date: May 2005 Location: Osaka, Japan Posts: 37	Easy trick to remember the order of these pseudo-classes is: LoVe HAte (Link, Visted, Hover, Active) They need to go in that order or CSS's natural cascading will cause for example "link" to supercede "visited" if you put link after visited. Just put 'em in LoVeHAte order and you'll be fine. __________________ :::: ÂDataFly.Net Â:::: Rock-Solid Linux Web Hosting http://www.datafly.net

05-14-2005, 10:49 PM	#6 (permalink)
df-sean NamePros Member Join Date: May 2005 Location: Osaka, Japan Posts: 37	Anytime ;-) __________________ :::: ÂDataFly.Net Â:::: Rock-Solid Linux Web Hosting http://www.datafly.net

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

05-14-2005, 10:38 PM	THREAD STARTER #5 (permalink)
branwen NamePros Member Join Date: May 2005 Location: Texas Posts: 25	Thanks, everyone!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)