javascript - 使用 jquery 即时设置 js 下拉菜单的样式

Question

我有一个 JS 下拉菜单，我想即时设置样式

我大部分时间都在使用它，但是当我将鼠标悬停在菜单元素上时，它会更改整个菜单的 bg 颜色和文本颜色，而不仅仅是悬停在菜单元素上

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

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

非常感谢任何帮助

代码

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

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

更新的 fiddle : http://jsfiddle.net/6jz79/3/