Solved

Problem with jquery hover change

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

760 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

19 Experts available now in Live!

Get 1:1 Help Now