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

效果图
JQ--hover事件(鼠标进入和鼠标离开)_第1张图片
代码如下

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

你可能感兴趣的:(hover事件,鼠标进入,鼠标离开)