【案例】鼠标指针经过时背景变色

　　当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。接下来我们使用鼠标指针经过事件onmouseoer和标指针离开事件onmouseout 实现案例效果。

　　(1)编写HTML页面，示例代码如下。

  
       th>净值增长率
       ...（此处省略多个tr）
    

   

     

       
代码
       
名称
       
最新公布净值
       
累计净值
       
前单位净值
    
    
    

      

        
0035**
        
3个月定期开放债券
        
1.075
        
1.079
        
1.074
        
+0.047%
     
  

    

        
        
        
        
    
    

        
        
            
        
        
        
        
        
        
        
        
        
    
  
  

        
        
        
        
        
        
        
    

　　(2)实现鼠标指针经过时背景变色的效果，具体代码如下。 

< script >
    //1.获取元素
    var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
    // 3.鼠标指针经过事件 onmouseover
    trs[i].onmouseover = function() {
        this.className = 'bg';
    };
    //4.鼠标指针离开事件 onmouseout
    trs[i].onmouseout = function() {
        this.className = ‘’;
    };
} < /script>

背景变色效果