Hide a css styled link on hover with JavaScript

[taylortsantles]

Okay, us CSS nerds could not figure this out in css and we need JavaScript help.

Here is a link to the menu I'm working with:

http://www.ironforgeministries.com/Eyetech/index.html

I already have it set so that when I apply an <a class="on"></a> it will apply the style in my style sheet. What I want to know is this: How do I make it so that when I roll over the other links that, the styling for the one active disappears. Meaning, if it were on a page called "home", it would have a grey arrow next it and it would stand out different from the other links, but when you roll over the other links, I want that arrow and the styling on the "home" to disappear. I know the only way to do it is in JavaScript. Can anyone provide me with the code I would need to do it? Here is my css for the menu:

Code:
ul#sublink {
	font: 1em Arial, Helvetica, sans-serif;
	color: #666;
	padding-bottom: 4px;
	line-height: 20px;
	list-style: none;
	list-style-type: none;
}

ul#sublink li a {
	text-decoration: none;
	color: #666;
	display: block;
	padding-left: 40px;
	line-height: 25px;
}
	ul#sublink li a.on {
		background: transparent url(Images/arrow_grey.png) no-repeat 0px 4px;
	}
	ul#sublink li a:hover, ul#nav li.selected a.on {
		background: transparent url(Images/arrow.png) no-repeat 0px 4px;
		color: #0a87ac;
	}

[rangana]

This is a shot in the dark, try to have this script:

<script type="text/javascript">
window.onload=function(){
for(var i=0,a=document.getElementById('sublink').getElementsByTagName('a');i<a.length;i++)
	{
	a[i].onmouseover=function()
		{
		removeClass();
		a[i].className='on'; // Set the class Name to on
		}
	}
}
function removeClass()
{
for(var i=0,a=document.getElementById('sublink').getElementsByTagName('a');i<a.length;i++)
	a[i].className=''; // Reset class names
}
</script>

It was basing on your CSS, if nothing works, please show us the markup.

[taylortsantles]

Rangana, your code worked great. Is there any way to have the "on" class re-appear when the mouse moves away from the menu?

Thank you so much!

[rangana]

Have a try on adding highlighted:

a[i].onmouseover=function()
		{
		removeClass();
		a[i].className='on'; // Set the class Name to on
		}
	a[i].onmouseout=function()
		{
		removeClass();
		a[i].className='on'; // Set the class Name to on
		}

I'm uncertain how this would work, not unless I could be able to see the markup.

Hope that helps.