Solved

Problem with jquery hover change

Posted on 2011-09-20
5
316 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

813 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now