表格行的hover问题

发布于
2016-09-05

鼠标移上去行怎么没有变色？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    table tr:hover
    {
        background-color:green;}
</style>
<script type="text/javascript">
$(function(){
    $('tr:even').css("background-color","orange");
    $('tr:odd').css("background-color","red");
    
    })
    
</script>

</head>

<body style=" overflow-x:scroll; ">
<table style="font-size:18px">
    <tr>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
       
    </tr>
    <tr>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
        
    </tr>
</table>

</body>
</html>

jquery

阅读 7.2k

4 个回答

得票最新

骚气的兔爷

5737

发布于
2016-09-05

✓ 已被采纳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    table tr:nth-child(odd){ background-color: orange;}
    table tr:nth-child(even){ background-color: red;}
    table tr:hover{
        background-color:green;
    }
</style>
</head>
<body style=" overflow-x:scroll; ">
<table style="font-size:18px">
    <tr>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
       
    </tr>
    <tr>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td>
        <td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
        
    </tr>
</table>
</body>
</html>

你用js把原有的hover给覆盖了，你可以直接用css写，考虑兼容性的话就都用js写

may4

发布于
2016-09-05

更新于
2016-09-05

新手上路，请多包涵

优先级的问题，css属性是在页面dom渲染时同时完成。js的样式重新定义在css加载之后对样式进行了修改，相当于直接在元素本身上新加了样式定义。

因此hover样式没有加载。