HTML中如何使表格的边框在鼠标悬停时变色

发布网友发布时间：2022-04-22 10:31

共4个回答

热心网友时间：2022-04-19 06:09

使用jquery为表格绑定鼠标悬停事件

/*---------css样式----------*/
.hover{color:red;}

$(".table_list tr").hover( //$(".table_list tr")选择table的class为table_list下的tr绑定事件
    function () {
        $(this).addClass("hover"); //鼠标悬停时，改变li的class样式
    },
    function () {
        $(this).removeClass("hover"); //鼠标离开时，取消tr的class样式
    }
);

热心网友时间：2022-04-19 07:27

借用js来动态改变表格的背景色即可，主要用到js事件及样式，如：
###demo
code
<body>
<table
border="0"
cellspacing="1"
cellpadding="1"
bgcolor="#ebebeb"
class="dev_wrap_table">

<tr
class="th">

<td
height="26"
align="center"
bgcolor="#ffffff">id</td>

<td
align="center"
bgcolor="#ffffff">用户名</td>

<td
align="center"
bgcolor="#ffffff">真实姓名</td>

<td
align="center"
bgcolor="#ffffff">开通时间</td>

<td
align="center"
bgcolor="#ffffff">最后登陆</td>

<td
align="center"
bgcolor="#ffffff">管理</td>

</tr>

<tr
bgcolor="#ffffff"
onmouseover="this.bgcolor='#f6f2e2'"
onmouseout="this.bgcolor='#ffffff'">

<td
height="26"
align="center"></td>

<td></td>

<td></td>

<td
align="center"></td>

<td
align="center"></td>

<td
align="center"></td>

</tr>

<tr
bgcolor="#ffffff"
onmouseover="this.bgcolor='#f6f2e2'"
onmouseout="this.bgcolor='#ffffff'">

<td
height="26"
align="center"></td>

<td></td>

<td></td>

<td
align="center"></td>

<td
align="center"></td>

<td
align="center"></td>

</tr>
</table>
</body>

热心网友时间：2022-04-19 09:01

运用到css伪类的知识，层叠样式表。

热心网友时间：2022-04-19 10:53

哈哈，那我也改改

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<style>
#aa{
border:5px dashed red
}
#bb{
border:5px dashed blue
}
.cc{
border:5px dashed blue;
}
</style>
</HEAD>

<BODY>
<TABLE width=300 height="300">
<TR>
<TD bgcolor=blue onMouseOver="this.id='aa'" onMouseOut="this.id='bb'" class="cc">d</TD>
</TR>
</TABLE>