图片演示：
鼠标放再那张图片上，就出现哪张图片，并且又动画过度效果
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
/*background-color: aqua;*/
/*border: 1px solid #000;*/
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 300px;
background-color: red;
float: left;
border: 1px solid #000;
box-sizing: border-box;
transition: width 0.5s;
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
/*优先级比ul:hover li高*/
}
</style>
</head>
<body>
<ul>
<li><img src="sfq/sfq1.png" alt=""> </li>
<li><img src="sfq/sfq2.png" alt=""> </li>
<li><img src="sfq/sfq3.png" alt=""> </li>
<li><img src="sfq/sfq4.png" alt=""> </li>
<li><img src="sfq/sfq5.png" alt=""> </li>
<li><img src="sfq/sfq6.png" alt=""> </li>
</ul>
<!--宗波尘客博客www.zbck123.com-->
</body>
</html>
