鼠标移入移出事件

最新推荐文章于 2025-03-24 16:08:55 发布

iteye_8932

最新推荐文章于 2025-03-24 16:08:55 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_8932/article/details/82677461

HTML 专栏收录该内容

4 篇文章

订阅专栏

鼠标的移入移出事件：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");
  });