demo.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{margin:0; padding:0;}
div{
width: 1150px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
<script>
window.onload = function () {
//需求:鼠标放入到li中该盒子变宽,其他的盒子变窄。移开大盒子,恢复原样。
//步骤:
//1.给li添加背景
//2.绑定onmouseover事件,鼠标放入到li中该盒子变宽,其他的盒子变窄
//3.移开大盒子,恢复原样