夏易网络

您的当前位置:首页 > 新闻动态 > 网站建设学堂 >

JavaScript mouseenter mouseleave 鼠标进入离开元素显示隐藏div,mouseover mouseout鼠标经过离开显示隐藏事件

2021-02-27 11:07:42   来源:夏易网络   评论:0 点击:
mouseenter 当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。
mouseleave 当鼠标指针离开被选元素时,会发生 mouseleave 事件。
 
注意:mouseenter与 mouseover 事件不同,mouseover 事件只有在鼠标指针进入被选元素时被触发,mouseenter事件在鼠标指针进入元素及其任意子元素时都会会被触发。

同理,mouseleave 与mouseout 事件也不同,mouseout 事件只有在鼠标指针离开被选元素时被触发,mouseleave 事件在鼠标指针离开元素且离开所有子元素时也会被触发。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript mouseenter mouseleave 鼠标进入离开元素显示隐藏div,mouseover mouseout鼠标经过离开显示隐藏事件</title>
</head>
<body>
<span  class="language"> <i><a href="javascript:(0);" >Language</a></i><em style=" display:none;"><a class="en" href="/">English</a> <a class="cn" href="/">中文</a> </em> </span>
<script type="text/javascript" src="http://www.nnxiayi.com/myfile/js/jquery.js"></script>
<script>
$(document).ready(function(){
  $(".language").mouseenter(function(){
    $(".language em").css("display","block");
  });
  $(".language").mouseleave(function(){
    $(".language em").css("display","none");
  });
});
</script>
</body>
</html>

新闻动态
网站建设学堂
网站优化学堂
网络行业新闻
夏易网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?