关于JQuery中的鼠标事件_jquery鼠标经过事件-CSDN博客

本文链接：https://blog.csdn.net/Hfeidz/article/details/120973978

本文详细介绍了JQuery中的鼠标事件，包括mousedown、mouseenter、mouseleave、mouseover、mouseout、mousemove和mouseup。通过这些事件，可以实现点击、进入、离开、经过等交互效果。还特别提到了mouseenter与mouseover的区别，并提醒在试验前需引入JQuery插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：以下所有效果都会以此结构展示

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px auto;
            transition: 0.5s;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

1. 鼠标点击效果： mousedown

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

<script>
    $(function(){
        $("#box").mousedown(function(){
            $(this).css("background","cyan")
            $(this).html("mousedown事件发生")
        })
    })
</script>

2. 鼠标(指针)穿过效果：mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

<script>
    $(function(){
        $("#box").mouseenter(function(){
            $(this).css("width","500px")
            $(this).html("mouseenter事件发生")
        })
    })
</script>

3. 鼠标（指针）离开效果：mouseleave

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

<script>
    $(function(){
        $("#box").mouseleave(function(){
            $(this).css("border-radius","50%")
            $(this).html("mouseleave事件发生")
        })
    })
</script>

4. 鼠标经过事件：mouseover
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。

<script>
    $(function(){
        $("#box").mouseover(function(){
            $(this).css("transform","translateX(100px)")
            $(this).html("mouseover事件发生")
        })
    })
</script>

5. 鼠标离开事件：mouseout
当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。


<script>
    $(function(){
        $("#box").mouseout(function(){
            $(this).css("transform"," rotateY(-360deg)")
            $(this).html("mouseout事件发生")
        })
    })
</script>

6. 鼠标离开事件：mousemove

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标


<script>
    $(function(){
        $("#box").mousemove(function(e){
            $(this).text(e.pageX + ", " + e.pageY);
        })
    })
</script>

7. 鼠标松开事件：mouseup

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮才会触发该事件。


<script>
    $(function(){
        $("#box").mouseup(function(){
            $(this).css("transform"," skew(-30deg,20deg)")
            $(this).html("mouseup事件发生")
        })
    })
</script>