...

View Full Version : Hide a css styled link on hover with JavaScript



taylortsantles
09-26-2008, 05:17 AM
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
09-26-2008, 05:32 AM
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
09-26-2008, 05:41 AM
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
09-26-2008, 06:24 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum