Aghhh! CSS – Cannot get Hover to Work!!!

Hi Forum.

I've been going nuts this past couple of days trying to work out why the hover code won't work for my text links. I did manage to get it to work on one link, so I simply copied that code, renamed it, then changed the attributes for a second link, but unlike the first the hover would not work despite there being no apparent errors in the CSS coding.

I've played around with this for so long now, and done many online searches in an attempt to find the cause. Unfortunately, because there are no 'seeming' problems with the code, there doesn't seem to be a solution as there is not problem as such!

I was wondering if it was because the links are in a table? Does this stop certain CSS formatting from working does anyone know? Any help, or links to help pages which are specific to the fix of this would be greatly appreciated.

I've popped a bit of code below for one of the links. It's the smallest font in the test page and should change colour on hover. I've tried other attributes too, like font size on hover, but to no avail. The only code that seems to work is the top one .tag0

Here's a sample page of the formatted links. Btw, the problem is evident in FF and IE.

}
	
.taq0 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

a:visited.taq0 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

a:hover.taq0 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFF00;
	text-decoration: none;
}

Code (markup):

Thanks in advance

Andy

 

this is wrong:

a:visited.taq0 {...

this is correct:

a.taq0:visited {...


of course the same goes for the :hover - or whatever pseudo-class - first the class, then the pseudo-class

 

<a href="./"><span class="taq0">condos bangkok</span></a>

Code (markup):

The class .taq0 is being applied to span elements which are children of the anchor elements. The a:hover & a:visited pseudoclasses cannot find their descendant targets with class="taq0" here unless there is a space between them in the selector line. A space means we are dropping down a level in the relationship. No space means it is trying to look around on the same level as the anchor elements, and finding nothing there.

a:visited .taq0 {

a:hover .taq0 {

Code (markup):

 

This should work

<span class="taq0"><a href="./">condos bangkok</a></span> <span class="taq3"><a href="./">apartment sukhumvit</a></span> 

Code (markup):

an the css

.taq0 a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

.taq0 a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #A3A3A3;
	text-decoration: none;
}

.taq0 a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #C51212;
	text-decoration: none;
}

.taq3 a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

.taq3 a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #A3A3A3;
	text-decoration: none;
}

.taq3 a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #C51212;
	text-decoration: none;
}

Code (markup):

 

Thanks so much for the replies guys, it's much appreciated. Even though there were only 3 responses I still got a little overwhelmed as this stuff is still alien to me even though I like to have a go at it.

I played around with some of the suggestions and got different results from each. Looking at the replies it's my guess that this CSS stuff is not quite as simple as it's promoted.

Adding the space gave me the change of colour on hover, but now I have blue underlines to all of the links even though the text decoration is set to none text-decoration: none; for each snippet of code.

http://www.mrroomfinder.com/blog/testCss.php

Any suggestions folks?

Thanks in advance

Andy

 

on the td that is 28% wide,

<td id="tagbox" width="28%" bgcolor="#333333">

Code (markup):

and in your css:

#tagbox a{
text-decoration:none;
}

Code (markup):

 

That's great casben79, thanks so much

I would never have got any of this in a month of Sundays, so i'll make sure i save this thread for future reference.

Once again, thanks to all who have contributed here. What might seem like simple solutions to you guys has had me scratching my head for over 2 days.

Aitch

 

.navbar a{text-decoration:none;margin-right:23px;}
.navbar a:link {color:#06C;}
.navbar a:hover {color:#039;}
.navbar a:active {color:#399;}
.navbar a:visited {color:#06C;}

... looks like I'm too late.