鼠標進入和鼠標移出事件
## 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>
```
