?
Solved

Problem with jquery hover change

Posted on 2011-09-20
5
Medium Priority
?
336 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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month8 days, 22 hours left to enroll

621 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