Question

改写下面一段原生js代码，把点击效果改成鼠标经过效果，谢谢！

<script type="text/javascript">
window.onload=function () {
var oH3 = document.getElementById("all");
var oUl = document.getElementById("main_navin");

oH3.onclick=function () {
if(this.className == '') {
this.className = 'on';
oUl.className = 'on';
} else {
this.className = '';
oUl.className = '';
}
};
};
</script>

Answer 1

<script type="text/javascript">
window.onload=function () {
var oH3 = document.getElementById("all");
var oUl = document.getElementById("main_navin");  
 oH3.onmouseover = function () {   
    if(this.className =='') {    
          this.className = 'on';    
               oUl.className = 'on';  
                   }   
                    };
 oH3.onmouseout = function () {  
     if(this.className == 'on') {     
          this.className = '';      
              oUl.className = '';   
                 }  
                   };
     };
</script>

希望对你有用。

追问

　　这个是我想要的效果图，鼠标经过全部分类，弹出下面的列表，你刚刚给的代码是可以实现这个效果，但是想要继续往下面菜单滑动就不行了。

追答

明白了，你的结构是这样子的对吧。

<div id='all' >商品分类</div> 
 <ul  id='main_navin' style='display:none;'>
   <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

   改成这样

 <div id='all' >
   <div>商品分类</div> 
      <ul  id='main_navin' style='display:none;'>  
              <li>1</li>    
              <li>2</li>   
              <li>3</li>  
        </ul>
 </div>

这样子可以解决2级菜单显示时正常移动上去 。

当然原先的 onmouseout 换成 onmouseleave 。

我个人的建议最好是用jquery类库去写js，处理兼容性强很多。

hover事件写法也更简单明了。

希望是你要的效果。

Answer 2

.onmouseover
.mouseover( handler(eventObject) )
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
添加的版本: 1.4.3.mouseover( [eventData ], handler(eventObject) )
eventData
类型: PlainObject
一个对象，它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)
类型: Function()
每次事件触发时会执行的函数。
添加的版本: 1.0.mouseover()
这个方法不接受任何参数。

Answer 3

吧onclick 改成onmouseover 就行了