Question

我有一个JS dropdownmenu，我想动态设置样式

我主要使用它，但当我将鼠标悬停在菜单元素上时，它会改变整个菜单的bg颜色和文本颜色，而不仅仅是悬停在菜单元素上

我如何只更改悬停在元素上的样式？

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

任何帮助非常感谢

代码

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

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

要：

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

更新了小提琴： http://jsfiddle.net/6jz79/3/

使用jquery动态设置js下拉菜单

1 个答案: