开发者社区开发与运维文章正文

表格鼠标经过时变色

2016-05-10 1460

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

如何实现鼠标经过时变色呢?

如图:

------------------------------------

如何实现鼠标放在上面时表格的行变色呢?

有如下两种方式:

方式一:使用纯css

    Css代码  
    
  
div.queryResultDiv table.productList tr:nth-child(n+2):hover  
{  
    background-color: #B0D2FF;  
}  

说明:n从零开始,所以hover从第二行才有效,因为表格第一行是标题.

方式二:使用JavaScript脚本:

    Js代码  
    
  
$("div.navarea #main2 tr").bind('mouseover',function(){  
        var href22=$(this).find('a');  
        var selectedHref=$('div.navarea #main2 li.current a');  
        $('#main2 tr').addClass("not_current").removeClass("current");  
    href22.addClass("current");  
    });  
});  