Solved

Problem with jquery hover change

Posted on 2011-09-20
5
317 Views
Last Modified: 2012-05-12
I have two problems with a hover on a menu.  First I need the color of the text to stay yellow when it is selected.  When the mouse moves off of it I want it to stay yellow, and I'm not sure what to add to the jquery script to do that.  The panel selected stayes but the color doesn't.  I'm not sure what to add in the script.

The other only happens if you are moving the mouse from right to left over the menu categories.  When you get to "The Latest" category on the menu, it won't change until you are past it, but it will if you move the mouse from above or below.  It's almost like the hot spot doesn't quite work when going from right to left over it.

http://insurance.illinois.gov/intranewdefault/
0
Comment
Question by:smitty62
  • 3
  • 2
5 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 36569714
in your styleshee, on line 89 add the following line of code
#header #navig #navig_list li:hover a.menu_level_1 {
    ...
}

Open in new window


to this:
#header #navig #navig_list li:hover a.menu_level_1,
#header #navig #navig_list li.hover a.menu_level_1 {
    ...
}

Open in new window


And change your javascript to this:

$(document).ready(function(){
    $(".parent").hover(function(){
        $(".parent").removeClass('hover');
        $(".menu_area").hide();
        $(this)addClass('hover').find(".menu_area").show();
     });
});
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 36569719
Doh, forgot a period in my javascript.  Use this:

$(document).ready(function(){ 
    $(".parent").hover(function(){
        $(".parent").removeClass('hover');
        $(".menu_area").hide();
        $(this).addClass('hover').find(".menu_area").show();
     });
});

Open in new window

0
 

Author Comment

by:smitty62
ID: 36570073
Thanks, that worked for the yellow highlight.  I also still have the other problem with "The Latest" category.  Would you prefer that I right up that question separately and submit it again.  
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 36570224
The second problem you are experiencing is a result of the following:

http://validator.w3.org/check?uri=http%3A%2F%2Finsurance.illinois.gov%2Fintranewdefault%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

See if you can figure it out.  If you can't let me know.  I'll give you a hint - it doesn't have anything to do with an ampersand... but you should fix the ampersand problem anyways by "HTML Encoding" you ampersands:
&

Open in new window

0
 

Author Closing Comment

by:smitty62
ID: 36576724
Sorry Designbyonyx, I should have checked it with the validator first.  I got it working.  Thank you.
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 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