您的位置:首页 > Web前端 > JQuery

使用jquery实现表单点击进入、移出变色效果(三)

2016-01-07 16:26 603 查看
<!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="js/jquery.min.js"></script>

<script>

$(function(){
$("tr:eq(0)").css({backgroundColor:"black",color:"#FFF"});
//hover是jQuery中的一个复合事件、
//当鼠标进入选中的元素时,会执行第一个处理函数
//当鼠标离开选中的元素时,会执行第二个处理函数
$("tr:gt(0)").hover(
//处理鼠标进入事件
function(){
$(this).css("backgroundColor","#CCC");

},
//处理鼠标离开事件
function(){
$(this).css("backgroundColor","#FFF");

}
);
})

</script>

</head>

<body>

    <table width="300" border="1">

        <tr>

            <td>姓名</td>

            <td>成绩</td>        

        </tr>

        <tr>

            <td>张三</td>

            <td>85</td>        

        </tr>

        <tr>

            <td>李四</td>

            <td>90</td>        

        </tr>

        <tr>

            <td>王五</td>

            <td>70</td>        

        </tr>

        <tr>

            <td>赵六</td>

            <td>95</td>        

        </tr>                

    </table>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: