Jquery drop down options -hover and background color problems - any better approaches?

I'm trying to create some drop down elements with CSS and jquery. Here's what I'm trying to achieve:

  • When mouse hovers over a particular word in a sentence the background colour of the word is altered and a drop down appears with a few options (using same background colour).
  • The background colour of the original highlighted word should hold
    when hovering over the options below.
  • Upon leaving the drop down it should return to hidden and the
    original word should return to a background color of transparent.

The solution I have at the moment doesn't work perfectly. Hovering sometimes causes the drop down to flicker a bit. I'm wondering if anyone could suggest some better approaches?

I think what I've done is a bit of a hack really. I'm unsure how to select the specific li element that the user hovers over originally so I can alter the bg colour of that particular element (without specifically assigning IDs to every parent li). So instead I simply change all li elements to transparent upon leaving the dropdown and then have to change all elements to the blue bg colour if the word is highlighted again. Also when hovering over sub items I'm effectively changing the bg colour each time which also doesn't seem the best way to do it.

Here's the javascript:

$('#nav li').hover( function () { $(this).css('background-color', '#A7B7FF'); // to set parent item to blue $('ul', this).css('background-color', '#A7B7FF'); // set sub items to blue //show its submenu $('ul', this).css('z-index', '600'); // so it overlaps other drop down below $('ul', this).slideDown(100); }, function () { //hide its submenu $('ul', this).slideUp(100, function() { $('li').css('background-color', 'transparent'); // callback so parent item returns to transparent } ); } );

For a full example look here: http://jsfiddle.net/A4r2m/1/

Many Thanks


I throttled the hoverleave for 500 milliseconds, so it won't flicker. This also means it takes 500 milliseconds for the menu to disappear after the user has left the area so user can accidentally leave the area for a bit and then come back and it won't have to animate all over again.

edit: I needed to add cancel to the throttled hoverOut.


Category:javascript Time:2011-10-15 Views:0

Related post

  • jQuery this child element hover acitvate background color 2011-11-28

    I'm still learning jQuery and would appreciate some pointers with this, as I think its simple but not sure how to do it quite. See below my mark up generated by wordpress, its a side bar list for categorys with post count. <div id"sidebar-left"

  • How to use jQuery to fade in/out li a:hover css background-color? 2011-11-27

    I have been struggling with a problem for a couple of days now with no success so decided to sign up here and see if some kind soul can help me out. Fingers crossed! I am trying to animate (fade in/out) the css background-color of a link in an unorde

  • jQuery - How can I override a background color animation with hover? 2010-04-23

    I am new to jQuery and need some help with the following problem. I have a simple table of data (20 rows by 4 columns) on a webpage (asp.net mvc). Note - I have built the table using <div> tags and not <table> <td> <tr> tags.

  • jQuery / CSS precedence when setting/overriding background-color 2012-02-23

    I'm using jQuery to addClass to a hovered over div...but the background color won't change. I'm guessing it's because it has previously been assigned a background-color in CSS? Other properties (border) on the hover class appear when hovering so addC

  • Jquery mouseover change background color problem 2010-06-03

    Jquery code: $(".menu_clickable").mouseover(function() { $(this).css({'background-color' : '#F00'}).mouseout(function(){ $(this).css({'background-color' : '#FFF'}); }); }); $(".menu_clickable").live('click', function() { $(this).css({'background-colo

  • Nested Li Elements Hover Alternate Background Color 2011-02-18

    Here's a quick overview of my problem. I've got a list with initial background color 1 like this: <ul> <li>Item 1 <ul> <li>Sub Item 1 <ul> <li> Sub Sub Item 1</li> <li>Sub Sub Item 2</li> </ul

  • How do I use jquery to change a previous div background color? 2011-10-05

    What I'm trying to do is, if a div is clicked on, that div and its predecessors have the same background color. For example if '4' is clicked on; 4, 3, 2 and 1 have the same background color. I tried unsuccessfully to achieve this, how do I fix it? h

  • Why does jquery-ui-dialog uses both a background color and image for the overlay? 2012-01-11

    jquery-ui-dialog uses an overlay div for modal dialogs. The div has this style: .ui-widget-overlay { background: #AAA url(images/ui-bg_flat_75_aaaaaa_40x100.png) 50% 50% repeat-x opacity: 0.3; } Why does it specify both background color and image? Wh

  • Why is this jQuery code not working to alter background-color in Firefox? 2009-04-28

    I'm trying to get the hang of jQuery and I had this simple bit of code that refuses to work. Anyone got an idea of why this might not be working? <html> <head> <script type="text/javascript" src="jquery.js"></script> <scrip

  • Using jquery to execute border:none and background-color:white on empty cells 2010-08-05

    So I have this (huge) table , classed with css (big_conv_tbl) . All "empty" cells have a &nbsp inside them , I'm also using an odd/even css script to make the table easier to read (and thus some "empty" cells have a gray background color) . What

  • jquery loop through row and add background color 2011-07-13

    I'm looping through my grid and looking at the last column to see if there are any text. If there are, I want to add css background color. What I have right now seems to work a bit but not fully because it's adding a background color even if there is

  • jQuery-Select list option hover 2012-02-04

    I want to alert an option when the mouse-cursor is over it. I use this code: $("select > option").hover(function () { alert($(this).attr("id")); }); Unfortunately, this is neither working in IE nor in FF. Can someone give me a hint please? -------

  • jQuery div on the fly with background color 2012-04-08

    I wonder if anybody can explain why in the first created div the background color will not work and it does in the second example. $("<div/>", { width:300, height:400, backgroundColor:"#425412", //background-color does not work text: "hello the

  • C#: Background color problem 2010-02-05

    I am having trouble with background colors in C#. For some reason they are simply not working. Specifically on the System.Windows.Forms.Panel control. Setting the BackColor property does nothing. All I have is gray and all the efforts I have made wil

  • div inside a div Css background color problem 2011-04-04

    I want the outer div to span to all the page width with the background color #efefef. The inner div will be centered and have white background with 995px width. So i have this code: <div style="background-color:#efefef;width:100%;"> <div id=

  • UITableViewCell background color problem 2011-06-14

    I subclassed UITableViewCell to set a cell background color to a color I need: .h @interface DataViewCustomCell : UITableViewCell { UIColor* cellColor; UIColor* standardColor; } - (void) setCellColor: (UIColor*)color; @end .m @implementation DataView

  • Android WebView Background Color Problem 2011-06-22

    I have a webview in which I am showing some html text, for the same webview I have put background color as white both in xml and in the Java class. My problem is that if the text is short, only the part of the screen which has text appears with backg

  • Background-color problem in dropdown menu 2011-07-25

    Look at this http://jsfiddle.net/esTzk/ How come the color on my #header won't apply ? --------------Solutions------------- Give it a height or hide the overflow and it will. Either will work in this case. #header{ background:#2b2b2b; color:#fff; wid

  • Changing background color problem in mootools 2011-08-20

    I have the following css classes: .info { padding-left: 15px; padding-bottom: 20px; display: block;} .info_edit { background-color: #F2F2F2; padding-left: 15px; display: block; border-bottom: 1px solid #E9E9E9; } .info_wait { padding-left: 15px; padd

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.583 (s). 13 q(s)