xuyanyanya

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>

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

 

分类:

技术点:

相关文章: