<!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>
<script src="jquery-3.4.1.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
list-style: none;
display: flex;
}
li{
width: 100px;
height:100px;
border: 1px solid black;
/* transition: 0.5s; */
position: relative;
}
li>img:nth-child(2){
position: absolute;
left: 0px;
/* opacity: 0; */
display: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/129/129.jpg" alt="" width="100px" height="100px" class="zxc">
<img src="129-freehover.png" alt="" srcset="" width="300px" height="100px" class="zxc1">
</li>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/542/542.jpg" alt="" srcset="" width="100px" height="100px" class="zxc">
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/129/129-freehover.png" alt="" srcset="" width="300px" height="100px" class="zxc1">
</li>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/538/538.jpg" alt="" width="100px" height="100ppx" class="zxc">
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/129/129-freehover.png" alt="" srcset="" width="300px" height="100px" class="zxc1">
</li>
</ul>
</div>
<script>
$('li').mouseover (function () {
// 鼠标经过
$(this).stop().animate({
width:300
}).find('.zxc').stop().fadeOut().siblings('.zxc1').stop().fadeIn()
// 找到.zxc 进行影藏 然后找到兄弟元素显示
$(this).siblings().stop().animate ({ //将其他的li的宽度变100px 里面的.zxc显示 兄弟的元素.zxc1 不显示
width:100
}).find('.zxc').stop().fadeIn().siblings('.zxc1').stop().fadeOut()
})
</script>
</body>
</html>
标签：zxc,王者,100px,荣耀,stop,li,width,zxc1,手风琴 From： https://www.cnblogs.com/xxh12/p/16861015.html