jQuery 事件 - 鼠标事件

  • hover() 方法
       hover用法点击打开hover用法链接

         hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

         jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

         jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

  • mouseover() 方法

 定义和用法

 当鼠标指针位于元素上方时,会发生 mouseover 事件。对应的mouseout方法;

         该事件大多数时候会与 mouseout 事件一起使用。

          mouseout()方法于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。

         mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数。

注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。


  • mouseenter() 方法

        定义和用法

        当鼠标指针穿过元素时,会发生 mouseenter 事件。对应的mouseleave方法;

        该事件大多数时候会与 mouseleave 事件一起使用。

        mouseleaver()方法是在用户的光标离开元素时触发。

        mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数。

注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover事件。

  • mouseover() 方法与mouseenter() 方法
  <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。(图中,指针穿过
      mouseMover的div、h2、span,这三个元素,数字都会变化,即都会触发mouseover事件)</p>
    <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。(图中,只要指针不移出
    mouseEnter的div,数字就不会变化。)</p>
    <div class="mouseMover">
        <h2>被触发的 Mouseover 事件:<span></span></h2>
    </div>
    <div class="mouseEnter">
        <h2>被触发的 Mouseenter 事件:<span></span></h2>
    </div>


x=0;
y=0;
$(document).ready(function(){
  $(".mouseMover").mouseover(function(){
    $(".mouseMover span").text(x+=1);
  });
  $(".mouseEnter").mouseenter(function(){
    $(".mouseEnter span").text(y+=1);
  });
});







mousedown()方法

        定义和用法

       当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件。
         mousedown() 方法触发 mousedown 事件,或添加当发生 mousedown 事件时运行的函数。
         提示:该方法通常与 mouseup() 方法一起使用。

         mouseup() 方法当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件。mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值