造型上与jQuery

Question

飞我有一个JS dropdownmenu一个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' 
      }); 
     }); 

更新拨弄：http://jsfiddle.net/6jz79/3/