jQuery highlight links on hover - how to?

I have navigation links on my index page in a header file. I need to highlight these links with a color and underline when mouseover and back to unhighlight and no underline on mouseout. I've tried several combinations of addclass and removeclass but they are all buggy. The biggest issue is that if I have a link to a page with target="_blank", the link stays highlighted even after mouseout. How do I rectify this and are there any working examples for links that are not buggy?
LVL 1
roger vAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Changing the color and underline on links is easier done with a CSS 'hover'.  This is from one of my pages:
.nav2 {
		color: #ffffff; 
		text-decoration: none;
		height: 24px; 
		background-image: url(bluebarmid.jpg);
		}
.nav2 A {color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 14px;}
.nav2 A:link {color: #ffffff; text-decoration: none;}
.nav2 A:visited {color: #eeeeee; text-decoration: none;}
.nav2 A:hover {color: #ffffff; text-decoration: underline; }
.nav2 A:active {color: #ffffff; text-decoration: none;}

Open in new window

0
 
pritamduttConnect With a Mentor Commented:
Here is a tutorial on how to create hove menu: http://northeastwebdesign.com/2010/01/jquery-hover-menu-tutorial/


Hope this helps!


Regards,
0
 
roger vAuthor Commented:
@DaveBaldwin:

Isn't the problem with pure css that it can only work on IE 6 & up?
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Dave BaldwinFixer of ProblemsCommented:
Nothing older than IE6 ever shows up on the browser usage charts anymore.  And Jquery http://jquery.com/ is not specced to work on anything earlier either.
0
 
roger vAuthor Commented:
@prtiamdutt:

The link you provided has the div's id in order for it to work. The div in my page already has an id and the attributes are set in a CSS file to which I have no access. So I need to be able to access the li or the a elements directly. But when I do, I keep getting the buggy behaviour that I described.
0
 
roger vAuthor Commented:
@DaveBaldwin:

I went ahead and tried your pure css but it's not changing the links. I checked in firebug that the css was being loaded and it is. What could I be missing?
0
 
roger vAuthor Commented:
This is what my modified css looks like:

.prettyhover {
            color: #ffffff;
            text-decoration: none;
            /*height: 24px;
            background-image: url(bluebarmid.jpg);*/
            }
.prettyhover A {color: #ffffff;}
.prettyhover A:link {color: #ffffff; text-decoration: none;}
.prettyhover A:visited {color: #eeeeee; text-decoration: none;}
.prettyhover A:hover {color:#66FF33; text-decoration: underline;}
.prettyhover A:active {color:#C90; text-decoration:none;}

This is my header file:
<style type="text/css">
@import url("/includes/intranet.css");            /* main stylesheet */
@import url("/includes/tablesorter.css");         /* table sort stylesheet */
@import url("/includes/jquery.tablesorter.pager.css");   /* table sort pager stylesheet */
@import url("/includes/ui-lightness/jquery-ui-1.8.14.custom.css");   /* jquery UI stylesheet */
@import url("/includes/utilities.css");
</style>

<div id="header">
    <h2 id="title" style="margin-left:415px;margin-top:20px;"><a href="index.cfm" title="Home">Test DB Home</a></h2>
    <ul class="nav-bar">
      <li #indexClass#><a href="index.cfm" title="Status" id="home" class="prettyhover" >Home</a></li>
      <li #indexClass#><a href="http://xxx/xxx/xxx/help.cfm" title="Help" target="_blank" id="help" class="prettyhover" >Help</a></li>
    </ul>
</div>
0
 
Dave BaldwinFixer of ProblemsCommented:
Something else is probably interfering.  On the page where I'm using that code, I don't have any other CSS files loaded.  What do you mean by "This is my header file:"?  External CSS files do not use <style> tags.
0
 
roger vAuthor Commented:
My CSS is in a file called utilities.css. And I load it in my header file (the file that has all the navigation links) with the following:

@import url("/includes/utilities.css");
0
 
Dave BaldwinFixer of ProblemsCommented:
I keep forgetting this one.  You have to apply the class to the element that encloses the link.  Putting in the link tag doesn't work.
<div id="header">
    <h2 id="title" style="margin-left:415px;margin-top:20px;"><a href="index.cfm" title="Home">Test DB Home</a></h2>
    <ul class="nav-bar">
      <li class="indexClass prettyhover"><a href="index.cfm" title="Status" id="home">Home</a></li>
      <li class="indexClass prettyhover"><a href="http://xxx/xxx/xxx/help.cfm" title="Help" target="_blank" id="help">Help</a></li>
    </ul>
</div>

Open in new window

0
 
roger vAuthor Commented:
I can't do that cuz the indexClass is a variable that is being set and I don't have control over it. The only elements I can control are the 'a' elements inside the li. That's the reason I tried jquery and it kinda works but if the help link is clicked, the link opens up a new window but the link in the parent window still stays highlighted.

So when I debugged it, the removeClass is not being fired when the help link is clicked. Do you know why that is?
0
 
Dave BaldwinFixer of ProblemsCommented:
No, I don't know.  You'll have to ask someone else about the jquery methods.
0
 
roger vAuthor Commented:
Did not solve the problem i'm having but close.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.