鼠标通过图片,全副显示
创立a,将b全副横过去!
而后b设置溢出暗藏,并且退出动画时帧速度为0.8
这里的图300其实是为了自适应高度
<template> <div class="a"> <div class="b"><img src="1.jpg"></div> <div class="b"><img src="2.jpg"></div> <div class="b"><img src="3.jpg"></div> <div class="b"><img src="4.jpg"></div> <div class="b"><img src="5.jpg"></div> </div></template><style lang="less" scoped="scoped"> .a { display: flex; .b { overflow: hidden; transition: all 0.8s; img { width: 300px; } &:hover { flex:0 0 auto } } }</style>