?
Solved

jQuery highlight links on hover - how to?

Posted on 2011-10-18
13
Medium Priority
?
256 Views
Last Modified: 2012-05-12
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?
0
Comment
Question by:roger v
  • 7
  • 5
13 Comments
 
LVL 9

Assisted Solution

by:pritamdutt
pritamdutt earned 75 total points
ID: 36988166
Here is a tutorial on how to create hove menu: http://northeastwebdesign.com/2010/01/jquery-hover-menu-tutorial/


Hope this helps!


Regards,
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1425 total points
ID: 36988198
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
 
LVL 1

Author Comment

by:roger v
ID: 36988364
@DaveBaldwin:

Isn't the problem with pure css that it can only work on IE 6 & up?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36988411
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
 
LVL 1

Author Comment

by:roger v
ID: 36988422
@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
 
LVL 1

Author Comment

by:roger v
ID: 36988478
@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
 
LVL 1

Author Comment

by:roger v
ID: 36988504
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36988559
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
 
LVL 1

Author Comment

by:roger v
ID: 36988592
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36988757
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
 
LVL 1

Author Comment

by:roger v
ID: 36988857
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36989122
No, I don't know.  You'll have to ask someone else about the jquery methods.
0
 
LVL 1

Author Closing Comment

by:roger v
ID: 37098761
Did not solve the problem i'm having but close.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month14 days, 22 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question