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事件也会触发。