<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
width: 1200px;
height: 400px;
overflow: hidden;
border: 1px solid red;
margin: 100px auto;
}
li {
float: left;
width: 240px;
height: 400px;
transition: all 1s;
}
</style>
</head>
<body>
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
</ul>
<script>
const lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {//鼠标移入时,移入的那个li宽度变为800px,其他的里宽度为100px
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 () {//鼠标移出时,所有的li宽都为240px
for (let j = 0; j < lis.length; j++) {
lis[j].style.width = '240px'
}
})
}
</script>
</body>
</html>
05-15
73
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-11
369
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-29
730
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
12-28
11-17