鼠标的移入移出事件:hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件;
$("#"+id).find("tr").hover(function(){ $(this).css({"backgruond-color","pink"});//当鼠标移进 触发事件 },function(){ $(this).css({"backgruond-color",""});//当鼠标移出的时候触发事件 })
mouseenter、mouseleave:效果与hover相同;
例子:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseenter(function(){ $("p").css("background-color","yellow");\\鼠标移入改变背景颜色 }); $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");\\鼠标移出改变背景颜色 }); }); </script> </head> <body> <p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p> </body> </html>
mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件
与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件
例子:
$(document).ready(function(){ $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });