JS——jquery对hover的操作

描述：

简单的表格的hover效果，鼠标滑过变色

效果：

JS——jquery对hover的操作

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>

    var table=$("<table></table>").appendTo(document.body)
        .width(1200)
        .height(600)
        .css("margin","0 auto")
        .css("backgroundColor","#efefef");

    for (var i=0;i<12;i++){
        var trs=$("<tr></tr>").appendTo(table);
        for (var j=0;j<6;j++){
            $("<td></td>").appendTo(trs);
        }
    }

    $("tr").css("backgroundColor","red")
        .hover(function () {
            $(this).css("backgroundColor","blue")
            //滑过时的样子
        },function () {
            $(this).css("backgroundColor","red")
            //滑过后的样子，设置成原来的样子，否则会变色
        });

</script>
</body>
</html>

JS——jquery对hover的操作

描述：

效果：

实现：

相关推荐