jquery 鼠标事件

1.mousedown()，鼠标按下事件

<body>
<div id="a">

</div>
</body>
</html>
<script>
   $('div').mousedown(function () {
       $('div').after("<p style='color:purple;'>按下鼠标按钮。</p>");

   })
</script>

　　结果：按下鼠标之后字会变成紫色

2.mouseenter()，鼠标进入事件

<body>
<div id="a">
</div>
</body>
</html>
<script>
   $('div').mouseenter(function () {
       $('div').css('background-color','red')
   })
</script>

　　结果：鼠标穿过盒子时，盒子变为红色

3.mouseleave()，鼠标离开事件

<body>
<div id="a">
</div>
</body>
</html>
<script>
   $('div').mouseenter(function () {
       $('div').css('background-color','red')
   })
    $('div').mouseleave(function () {
        $('div').css('background-color','yellow')

    })
</script>

　　结果：当鼠标进入的时候盒子变为红色，鼠标离开的时候盒子变为黄色。

4.mousemove()，当鼠标移动事件

<body>
<div id="a">
</div>
</body>
</html>
<script>
   $('div').mousemove(function () {
       $('div').css('background-color','red')
   })

</script>

　　结果：当鼠标在盒子中移动的时候，盒子变为红色

5.mousemove(),鼠标移出事件

<body>
<div id="a">
</div>
</body>
</html>
<script>
   $('div').mouseout(function () {
       $('div').css('background-color','red')
   })

</script>

　　结果：当鼠标移出盒子时，盒子变为红色

6.mouseup()，鼠标按下事件

<body>
<div id="a">
</div>
</body>
</html>
<script>
   $('div').mouseup(function () {
       $('div').css('background-color','red')
   })

</script>

结果：鼠标按下的时候盒子变为红色

 

posted @ 2021-12-20 11:47  梦话！  阅读(69)  评论(0)    收藏  举报