标签：doctype font 鼠标 oat 宽度 over hidden hover 案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3过渡模块-手风琴效果</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 ul{ 9 width: 960px; 10 height: 300px; 11 border: 1px solid red; 12 margin: auto; 13 list-style: none; 14 overflow: hidden; 15 } 16 ul li{ 17 width: 160px; 18 float: left; 19 transition: width 1s; 20 }
鼠标悬浮ul时，设置所有li宽度变小 21 ul:hover li{ 22 width: 100px; 23 }
24 ul li:hover{鼠标悬浮当前li时，宽度变宽 25 width: 460px; 26 } 27 </style> 28 </head> 29 <body> 30 <ul> 31 <li><img src="video/images/ad1.jpg" alt=""></li> 32 <li><img src="video/images/ad2.jpg" alt=""></li> 33 <li><img src="video/images/ad3.jpg" alt=""></li> 34 <li><img src="video/images/ad4.jpg" alt=""></li> 35 <li><img src="video/images/ad5.jpg" alt=""></li> 36 <li><img src="video/images/ad6.jpg" alt=""></li> 37 </ul> 38 </body> 39 </html>
鼠标悬浮时效果图：
标签：doctype font 鼠标 oat 宽度 over hidden hover 案例
原文地址：https://www.cnblogs.com/2020-2-12/p/12576400.html
