首页 > 代码库 > 匿名函数和鼠标移入移除事件

匿名函数和鼠标移入移除事件

2024-10-09 15:22:02   211人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变边框</title>
    <style>
        .def {
            border: 1px solid #ccc;
            margin-right: 120px;
        }

        .hover {
            border: 1px solid red;
            margin-right: 120px;
        }
    </style>
    <script>
//        function over(target) {
//            target.className = ‘hover‘;
//        }
//        function def(target) {
//            target.className = ‘def‘;
//        }
        window.onload=function () {
            var img=document.getElementsByTagName(‘img‘);//取得所有的图片数组
            for(var i=0;i<img.length;i++){//遍历每一张图片
                img[i].onmouseover=function(){//每一张图片加一个onmouseover事件
                    this.className=‘hover‘;
                }
                img[i].onmouseout=function () {
                    this.className=‘def‘;
                }
            }
        }
        
    </script>
</head>
<body
">
<table>
    <tr>
        <td><img src="images/new_01.jpg" alt="" class="def"></td>
        <td><img src="images/new_02.jpg" alt="" class="def"></td>
        <td><img src="images/new_03.jpg" alt="" class="def"></td>
    </tr>
</table>
</body>
</html>

 

匿名函数和鼠标移入移除事件


联系
我们