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

最新推荐文章于 2021-06-07 20:24:52 发布

会做饭的技术男

最新推荐文章于 2021-06-07 20:24:52 发布

阅读量275

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hji2112jbkaa&title=%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E5%92%8C%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%85%A5%E7%A7%BB%E9%99%A4%E4%BA%8B%E4%BB%B6

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

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

会做饭的技术男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
匿名函数和鼠标移入移除事件

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

扫一扫