Javascript 使用jquery动态设置js下拉菜单的样式

我有一个JS下拉菜单，我想在飞行的风格

我已经让它大部分工作，但当我悬停在菜单元素上时，它会改变整个菜单的背景颜色和文本颜色，而不仅仅是悬停在菜单元素上

如何仅更改悬停元素的样式

在我的网站上，菜单和样式取自mysql数据库，但在这个例子中，我硬编码了菜单元素和样式

非常感谢您的帮助

代码

CSS:

JS:

HTML:

在您的

mouseenter

和

mouseleave

中，您正在使用选择器。您应该使用

this

以目标元素为目标

更改：

        $('#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'
            });
        });

致：

---

更新的fiddle:

更详细一点

$（'jsddm>li>a'）

选择与选择器匹配的所有元素（这就是为什么您的

mouseenter

和

mouseleave

函数适用于所有元素。

this

选择器只选择触发该函数的当前元素。@abhitalk先生，一位绅士和学者，非常感谢您的快速响应和支持。）solution@gaynorvader谢谢你的分解和解释

        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'
            });
        });

          <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>

        $('#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'
            });
        });

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