Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problem with jquery hover change

Posted on 2011-09-20
5
Medium Priority
?
330 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

715 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