Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Hide a css styled link on hover with JavaScript

    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:
    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;
    	}

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    This is a shot in the dark, try to have this script:
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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!
    Last edited by taylortsantles; 09-26-2008 at 05:44 AM.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Have a try on adding highlighted:
    Code:
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •