asked on

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?

SOLUTION

pritamdutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

roger v

ASKER

@DaveBaldwin:

Isn't the problem with pure css that it can only work on IE 6 & up?

Dave Baldwin

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.

roger v

ASKER

@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.

roger v

ASKER

@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?

roger v

ASKER

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>

Dave Baldwin

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.

roger v

ASKER

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");

Dave Baldwin

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

roger v

ASKER

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?

Dave Baldwin

No, I don't know. You'll have to ask someone else about the jquery methods.

roger v

ASKER

Did not solve the problem i'm having but close.