鼎商网 开启企业建站营销新时代、免费建站平台倡导者  站长学院
热线:400-000-2212
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程

table鼠标悬停效果

作者:科恒网络 日期:2016/3/1 17:21:09 人气:109

  

table 鼠标悬停效果

<!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>

<style type="text/css">

    table{width:100%;background-color:#fff;}

    table td{background-color:#ccc;padding:5px;}

    table tr.hover td{background-color:Green;}

</style>

</head>

<body>

<div id="container">

</div>

<script type="text/javascript">


    var doc = document,

        container = doc.getElementById("container"),

        html = [],

        table, i, len;

        

    var addListener = function () {

        if (window.addEventListener) {

            return function (el, sType, fn, capture) {

                el.addEventListener(sType, fn, (capture));

            };

        } else if (window.attachEvent) {

            return function (el, sType, fn, capture) {

                el.attachEvent("on" + sType, fn);

            };

        } else {

            return function () { };

        }

    } ();


    html[html.length] = '<table id="tablelist" cellpadding="0" cellspacing="1" border="0">';

    for (i = 0, len = 1000; i < len; i += 1) {

        html.push("<tr><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td></tr>");

    }

    html[html.length] = "</table>";

    container.innerHTML = html.join('');


    

    table = doc.getElementById("tablelist");


addListener(table, "mouseover", function (e) {

e = e || window.event;

var elem = e.target || e.srcElement,

name = elem.nodeName;

if(name === "TD"){

elem = elem.parentNode;

name = elem.nodeName;

}

setTimeout(function(){

if(name === "TR"&&elem.className.indexOf('h')<0){

elem.className = "hover";

}

},0);


});

addListener(table, "mouseout", function (e) {

e = e || window.event;

var elem = e.target || e.srcElement,

name = elem.nodeName;

if(name === "TD"){

elem = elem.parentNode;

name = elem.nodeName;

}

setTimeout(function(){

if(name === "TR"&&elem.className.indexOf('h')>=0){

elem.className = "";

}

},0);


});

    /*for (i = 0, len = table.rows.length; i < len; i += 1) {

        (function(item){

            addListener(item, "mouseover", function () {

                item.className = "hover";

            });

            addListener(item, "mouseout", function () {

                item.className = "";

            });

        })(table.rows[i]);

    }*/

</script>

</body>

</html>


回到顶部