网站底部经常会有微信图标，鼠标点击或者划入显示二维码的效果。
怎么来实现它呢？我们首先写一个简单的页面，实现鼠标移入移除或者点击显示隐藏效果。
前端页面：不要忘了引入 JQuery.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>
<script src="jquery.js"></script>
<style>
.header{
width:300px;
height:40px;
line-height: 40px;
text-align: center;
box-sizing: border-box;
color: #FFF;
background: #00b0f0;
font-size:20px;
margin-bottom: 0px;
border-radius: 5px 5px 0 0;
}
.content{
width:300px;
box-sizing: border-box;
padding: 5px;
border:1px solid #999;
background:#EEE;
text-indent: 2em;
display: none;
margin-top:0px;
}
</style>
</head>
<body>
<h5 class="header">什么是jQuery？</h5>
<div class="content">
Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，
它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
</div>
</body>
</html>
JS代码：
鼠标点击效果1：
<script>
$(function (){
//显示隐藏
$(".header").click(function (){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
</script>
鼠标点击效果2：
<script>
$(function (){
//使用bind的绑定事件,跟上上面的效果是一样的
$(".header").bind("click", function (){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
</script>
效果如下：
什么是jQuery？
Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，
它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
鼠标移入移除效果：
<script>
$(function (){
//鼠标的移入移出
$(".header").mouseover(function (){
$(".content").show();
}).mouseout(function (){
$(".content").hide();
});
</script>
鼠标移入移除效果（合成事件）：
<script>
$(function (){
//合成事件 hover()
$(".header").hover(function (){
$(".content").show();
},function (){
$(".content").hide();
});
</script>
效果如下：
什么是jQuery？
Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，
它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
微信鼠标移入显示效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery事件-微信的显示隐藏及鼠标的移入移出</title>
<script src="jquery.js"></script>
</head>
<body>
<div style="width: 230px;height: 200px;background-color: #333;position: relative;">
<div class="WeChat_code" style="position: absolute;top: 20px;left: 20px;display: none;">
<img src="images/WeChat_code.jpg" width="100" alt="">
<span style="display:block; border-width:5px 5px 0;border-style:solid;border-color:#fff transparent transparent;position: absolute;margin-top: -5px;margin-left: 20px;"></span>
</div>
<h5 class="jq_WeChat" style="margin:0;padding:0;position: absolute;bottom: 15px;left: 20px">
<img src="images/WeChat.png" width="50" alt="">
<span style="display:inline-block;margin-left:10px;color:#EEE;height:50px;font-size: 20px;line-height: 50px;vertical-align: top;">1209278955</span>
</h5>
</div>
</body>
<script type="text/javascript">
$(function (){
//合成事件 hover()
$(".jq_WeChat").hover(function (){
$(".WeChat_code").show();
},function (){
$(".WeChat_code").hide();
});
});
</script>
</html>
效果如下：
未经允许不得转载：w3h5 » jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/150189.html