我们在前端开发的时候经常遇到鼠标经过的时候发生事件,鼠标离开的时候发生事件的效果
下面看看效果图
这下来看看我们的代码吧
html部分
<div id="box">
<ul>
<li>
<a href="#">
<img src="./images/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/5.jpg" alt="">
</a>
</li>
</ul>
</div>
css部分
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1200px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
transition: all 500ms;
}
div ul {
width: 1200px;
}
这下来看看最重要的部分JavaScript
// 1.获取元素
let lis = document.querySelectorAll('li')
// 2.绑定事件
for(let i = 0 ; i < lis.length ; i++){
// 鼠标经过就发生事件
lis[i].addEventListener('mouseenter' , function(){
for(let j = 0 ; j < lis.length; j++){
lis[j].style.width = '100px'
}
this.style.width = '800px'
})
// 鼠标离开就消失事件
lis[i].addEventListener('mouseleave',function(){
for(let j = 0 ; j < lis.length; j++){
lis[j].style.width = '240px'
}
})
}
完美的结束本次案例。