zoukankan      html  css  js  c++  java
  • mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结。

    结论:

    mouseenter:当鼠标移入某元素时触发。

    mouseleave:当鼠标移出某元素时触发。

    mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。

    mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。

    mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。

    mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发。

    例子:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
        .a{
          width: 500px;
          height: 500px;
          background: aliceblue;
        }
        .b{
          width: 200px;
          height: 200px;
          background: beige;
        }
        .c{
          width: 100px;
          height: 100px;
          background: violet;
        }
        </style>
    </head>
    <body>
        <div class="a">A
          <div class="b"
            onmouseenter="mouseenter()"
            onmouseleave="mouseleave()"
            onmouseout="mouseout()"
            onmouseover="mouseover()"
            onmousemove="mousemove()">B
            <div class="c">C
            </div>
          </div>
        </div>
        <script>
          function mouseenter(){
            console.log('mouseenter')
          }
          function mouseleave(){
            console.log('mouseleave')
          }
          function mouseout(){
            console.log('mouseout')
          }
          function mouseover(){
            console.log('mouseover')
          }
          function mousemove(){
            console.log('mousemove')
          }
        </script>
    </body>
    </html>

    效果:

    操作:

    从A元素到C元素,再从C回到A,控制台输出如下:

    演示地址:

    http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/mouse-event.html

  • 相关阅读:
    第二阶段冲刺(三)
    第二阶段冲刺(二)
    第二阶段冲刺(一)
    阿里云体验:安装jdk
    知识储备
    wcf服务编程(二)
    wcf服务编程(一)
    操作xml练习
    操作文件简单的方法
    【mongoDB】学习笔记_02
  • 原文地址:https://www.cnblogs.com/lovesong/p/7781033.html
Copyright © 2011-2022 走看看