jquery的鼠标访问事件

来源：互联网发布：更改手机图标软件编辑：程序博客网时间：2024/05/22 02:18

当我们将鼠标放在一个图片或者一个区域时，图片或区域会进行相关的变化，这个变化在css中很容易实现，那么在jquery中是怎么实现的呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        img{            margin:10px 10px;            border: 1px solid grey;        }        .a{            border: 3px solid red;        }    </style>    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            //选择元素,添加事件            $('img').mouseover(function(){        //        $(this).css('border','3px solid orange')                $(this).addClass('a')            }).mouseout(function () {       //         $(this).css('border','1px solid grey')                $(this).removeClass('a')            })        })    </script></head><body><img class="a" src="img/1.jpg"/><img class="a" src="img/2.jpg"/><img class="a" src="img/3.jpg"/></body></html>

显示结果如图所示：

当鼠标放在图片上时，会触发mousemove函数，边框会变成3px红色的实体框，

当鼠标离开是，会触发mouseout函数，边框会恢复到原来样子。

阅读全文

0 0