JQ--hover事件(鼠标进入和鼠标离开)

最新推荐文章于 2024-09-12 16:31:59 发布

浅浅一笑^*^

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量2.7k

点赞数 2

分类专栏： hover事件鼠标进入鼠标离开文章标签： css jquery javascript

本文链接：https://blog.csdn.net/weixin_46409887/article/details/105698171

版权

hover事件同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

鼠标进入

1 篇文章 0 订阅

订阅专栏

鼠标离开

1 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        li{
            list-style: none;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            background-image: linear-gradient(lime 9%,blue 30%,yellow 66%,#bd2130 89%);/*背景渐变颜色*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("li:first").hover(function() {//鼠标进入和离开事件
            $(this).css({//进入改变样式
                background:"red",
                borderRadius:"50%"
            });
        },function() {//离开就恢复初始样式
          $(this).css("backgroundImage","linear-gradient(lime 9%,blue 30%,yellow 66%,#bd2130 89%)");
        })
          //只设置离开事件   进入设置null
        // $("li:first").hover(null,function() {//如果只有离开事件
        //     $(this).css("background","yellow");
        // })

    })
</script>
</body>
</html>