鼠标进入和鼠标移出事件
## onmouseenter 鼠标进入
##
## onmouseleave 鼠标移出事件
任意节点（标签）都可以给他们添加鼠标进入和移出事件。
<br/>
## 语法
注意：变量名称为获取节点样式的变量名称
```
变量名称.onmouseleave=function(){
}
```
```
变量名称.onmouseenter=function(){
}
```
### 代码使用顺序
### 先获取ID选择器
### 再绑定鼠标进入或者移除出事件。
```
/获取图片
var tu=document.getElementById("tu");
var fugai=document.getElementById("fugai1");
var tu1=document.getElementById("tu1");
//绑定图片事件
tu.onmouseenter=function(){ //鼠标进入
fugai.style.display="block";
tu1.src="./img/2.jpg";
}
tu.onmouseleave=function(){
fugai.style.display="none";
tu1.src="./img/1.jpg";
}
```
淘宝效果：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
a{
text-decoration:none;
color:black;
}
.lunbotu{
width:658px;
height:206px;
border:2px solid red;
margin:100px auto;
position:relative;
}
.lunbotu .fugai{
width:658px;
height:206px;
background-color:rgba(255, 0, 0, 0.6);
position:absolute;
left:0;
top:0;
display:none;
}
.lunbotu .fugai .dianji{
width: 75px;
height: 25px;
background-color:chartreuse;
border-radius: 5px;
position:absolute;
left:50%;
margin-left:-37.5px;
top:50%;
margin-top:-12.5px;
}
.lunbotu .fugai .dianji .baidu{
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="lunbotu" id="tu">
<img src="./img/1.jpg" alt="" id="tu1">
<div class="fugai" id="fugai1">
<div class="dianji">
<a class="baidu" href="https://www.baidu.com">点击查看</a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//获取图片
var tu=document.getElementById("tu");
var fugai=document.getElementById("fugai1");
var tu1=document.getElementById("tu1");
//绑定图片事件
tu.onmouseenter=function(){ //鼠标进入
fugai.style.display="block";
tu1.src="./img/2.jpg";
}
tu.onmouseleave=function(){
fugai.style.display="none";
tu1.src="./img/1.jpg";
}
</script>
```
