Stop element from losing hover colour

[Schmoopy]

Hey, I'm trying to change the colour of an element in an unordered list with javascript but when I do this the hover colour no longer shows.

Here's the HTML:

<ul id="nav">
<li><a class="selected" id="first" href="index.php" target="_self">Home</a></li>
<li><a href="venueinfo.html" target="_self">Venue info</a></li>
<li class="dotted"><a href="links.html" target="_self">Links</a></li>
<li><a id="monthall" class="selected" onclick="showMonth('All')" target="_self">All</a></li>
<li><a id="month5" onclick="showMonth(5)" target="_self">May</a></li>
<li><a id="month6" onclick="showMonth(6)" target="_self">June</a></li>
<li><a id="month12" onclick="showMonth(12)" target="_self">December</a></li>
</ul>

Hover CSS and "selected" class:

#sidebar ul#nav a.selected{
background-color:#66cc33;
color:#003300;
}

#nav a:hover{
background-color: #66cc33;
color:#003300;
}

The following JavaScript makes a call to a PHP file which returns content for that specific month so that's why the colour changes to show what month the user has clicked on:

function showMonth(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="sorting.php";

var i = 1;

for(i = 1; i <= 12; i++) {
	try { 
		document.getElementById('month' + i).style.backgroundColor = '#003300';
		document.getElementById('month' + i).style.color = '#66cc33';
	}
		
	catch(err) {
			
	}
}

if(str == 'All') {
	document.getElementById('monthall').style.backgroundColor = '#66cc33';
	document.getElementById('monthall').style.color = '#003300';
}

else {
document.getElementById('month' + str).style.backgroundColor = '#66cc33';
document.getElementById('month' + str).style.color = '#003300';
document.getElementById('monthall').style.backgroundColor = '#003300';
document.getElementById('monthall').style.color = '#66cc33';
}

document.getElementById('ajaxload').style.display='block';
document.getElementById('events').style.display='none';
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}

My JavaScript skillz aren't exactly great so the code may look very inefficient, but primarily I just want the script to not interfere with the "hover" class in the CSS.

[rangana]

The problem is not in the Javascript, but a missing rule on your CSS.

See if adding highlighted helps:

#nav li a:hover{
background-color: #66cc33 !important;
color:#003300 !important;
}

[Schmoopy]

Thanks for that but it doesn't fix the problem =/

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Schmoopy]

Oki, I put it up here:

http://bristoldnb.co.uk/testing/

If you roll over the links on the side where the months are, under "All" you'll see the colours change but then after you click on one of the months it stops.

Hope this helps.

[forum_amnesiac]

Excuse me if I'm being somewhat simple here, but if you're trying to indicate which month they selected couldn't you just use the 'visited' property for the<a> tag.

ie.

#nav li a:visited{
background-color: #66cc33 !important;
color:#003300 !important;
}

Then you don't need the javascript to change the colour.

You may need a script to unset the month tag from 'visited' when they return to the main page.

[Schmoopy]

Ah, fixed it now, I changed the wrong part in the CSS with the important tag.

I can't use the visited propery because it's done with AJAX and the page remains the same.