Styling a js dropdown menu on the fly with jQuery

Question

I have a JS dropdownmenu that I want to style on the fly.

I have got it mostly working, but when I hover over a menu element, it changes the bg color and text color of the whole menu and not just the hovered over menu element

How would I only change the styling of only the hovered over element?

On my site the menu and styling are taken from a mysql db, but for this example I have hardcoded the menu elements and styling in.

Code:

http://jsfiddle.net/6jz79/

CSS:

        #jsddm {
            margin: 0;
            padding: 0
        }
        #jsddm li {
            float: left;
            list-style: none;
            font: 12px Tahoma, Arial
        }
        #jsddm li a {
            display: block;
            padding: 5px 12px;
            text-decoration: none;
            border-right: 1px solid white;
            width: 70px;
            white-space: nowrap
        }
        #jsddm li a:hover {
            background: #fff
        }
        #jsddm li ul {
            margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white
        }
        #jsddm li ul li {
            float: none;
            display: inline
        }
        #jsddm li ul li a {
            width: auto;
            background: #fff
        }
        #jsddm li ul li a:hover {
            background: #fff
        }

JS:

        var timeout = 500;
        var closetimer = 0;
        var ddmenuitem = 0;
        
        function jsddm_open() {
            jsddm_canceltimer();
            jsddm_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }
        
        function jsddm_close() {
            if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }
        
        function jsddm_timer() {
            closetimer = window.setTimeout(jsddm_close, timeout);
        }
        
        function jsddm_canceltimer() {
            if (closetimer) {
                window.clearTimeout(closetimer);
                closetimer = null;
            }
        }
        
        $(document).ready(function () {
            $('#jsddm > li').bind('mouseover', jsddm_open);
            $('#jsddm > li').bind('mouseout', jsddm_timer);
        });
        
        document.onclick = jsddm_close;
        
        
        $('#jsddm > li > a').css({
            'background-color': '#000000',
                'color': '#FFFFFF'
        });
        
        
        $('#jsddm > li > a').mouseenter(function () {
            $('#jsddm > li > a').css({
                'background-color': '#FFFFFF',
                    'color': '#000000'
            });
        });
        $('#jsddm > li > a').mouseleave(function () {
            $('#jsddm > li > a').css({
                'background-color': '#000000',
                    'color': '#FFFFFF'
            });
        });

HTML:

          <ul id="jsddm">
              <li><a href="home">Home</a></li>
              <li><a href="products">Products</a>              
                  <ul>
                      <li><a href="product1">Product1</a></li>
                      <li><a href="product2">Product2</a></li>
                  </ul>
              </li>
              <li><a href="contact">Contact Us</a></li>
              <li><a href="about">About Us</a></li>
          </ul>



 

Answer 1

In your mouseenter and mouseleave you are using a selector. You should be using this to target the target element.

Change:

        $('#jsddm > li > a').mouseenter(function () {
            $('#jsddm > li > a').css({
                'background-color': '#FFFFFF',
                    'color': '#000000'
            });
        });
        $('#jsddm > li > a').mouseleave(function () {
            $('#jsddm > li > a').css({
                'background-color': '#000000',
                    'color': '#FFFFFF'
            });
        });

To:

        $('#jsddm > li > a').mouseenter(function () {
            $(this).css({
                'background-color': '#FFFFFF',
                    'color': '#000000'
            });
        });
        $('#jsddm > li > a').mouseleave(function () {
            $(this).css({
                'background-color': '#000000',
                    'color': '#FFFFFF'
            });
        });

Updated fiddle: http://jsfiddle.net/6jz79/3/