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

  • 相关阅读:
    windows下编译及使用libevent
    安装和使用memcached
    BroadcastReceiver插件化解决方案
    Service插件化解决方案
    Activity插件化解决方案
    换肤-插件化
    资源的插件化
    startActivity进行Hook
    代理模式
    对反射的封装
  • 原文地址:https://www.cnblogs.com/lovesong/p/7781033.html
Copyright © 2011-2022 走看看