• jQuery鼠标划入划出


     今天来简单的谈谈jQuery的一个划入划出的方法,。首先划入划出能想到的东西有哪些呢,。

      1:hover

      2:mouseenter/mouseleave

      3:mouseover/mouseout.

      一共是三中方法,先来说说他们的使用方法

    1
    2
    3
    4
    5
    $(".evo").hover(function(){
        $(this).addClass("red");
           },function(){
           $(this).removeClass("red");
           })

      这样写有点乱,那就写清楚点

    $("").hover(function(){
    
            },function(){
                
            })

      其实就这么一点代码,一共两个function,是因为划入划出,第一个function定义的是划入的效果,第二个function里面定义的是划出的效果,。

      在来看看第二种

      

     $(".evo").mouseenter(function(){
        $(this).addClass("red");
             })
            $(".evo").mouseleave(function(){
                $(this).removeClass("red");
            })

      再来看看第三种

      

     $(".evo").mouseover(function(){
        $(this).addClass("red");
             })
             $(".evo").mouseout(function(){
                $(this).removeClass("red");
             })

      再来说说他们的区别,这三者之间的区别其实只是两者的区别,首先hover其实和mouseenter+mouseleave是一样的,从字面上就可以理解,一个是鼠标进入,一个是鼠标离开,而mouseover/mouseout和他们之间的区别是上面呢,一般情况下不容易看出来,但是给他们触发的元素里面有子元素就可以看出效果了,。

    当用hover或者mouseenter/mouseleave的时候,鼠标移到元素上的时候会触发时间,当再在元素上移到器子元素上的时候就不会再触发了,。

    但是mouseover/mouseout就不同了,鼠标移到元素上的时候会触发时间,由元素上移到子元素又会触发,由子元素移到父元素又会再次触发,会不停的触发。

    而hover或者mouseenter/mouseleave只会触发一次。鼠标只要是在元素中和其父元素中活动都不会再次触发。

  • 相关阅读:
    Sublime Text 3 格式化HTML CSS JS 代码
    CSS 温故而知新
    JQuery Mobile 学习笔记
    Eclipse ADT 代码注释模版
    Eclipse ADT 与VS 常用的快捷键 对比学习
    元组、文件、以及其他
    类型与运算
    python
    python 内置函数 lamda表达式。 open 文件方法
    python 基础 基本数据类型
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/8781591.html
Copyright © 2020-2023  润新知