场景Scenario
假设有一组小图标, 为了节省空间, 美观效果, 进行缩排, 想要实现, 图标层叠展示, 在悬浮式全部显示的效果
解决方案
①方案一: 使用设定position 和 z-index, 在hover时设定改变z-index的值
②方案二: 使用负margin, 设定所有小图标的margin-left为负值,是其宽度的三分之一, 以达到层叠部分显示, 在hover时设定增加该图标的margin-right
具体实现代码
方案二较为简单, 故采用之.
HTML
1 <ul class="ls"> 2 <li class="item"> 3 <div class="sub aa" style="background-color: #FB563C">AA</div> 4 </li> 5 <li class="item"> 6 <div class="sub aa" style="background-color: #66CC00">EE</div> 7 </li> 8 <li class="item"> 9 <div class="sub aa" style="background-color: #00BCD4">II</div> 10 </li> 11 </ul>
CSS
1 .ls { 2 list-style-type: none; 3 margin-left: 0; 4 padding-left: 10px; 5 } 6 7 .item { 8 display:inline-flex; 9 margin-left:-15px; 10 } 11 12 .sub { 13 color: #FFFFFF; 14 width: 30px; 15 height: 30px; 16 line-height: 30px; 17 text-align: center; 18 font-size: 14px; 19 border-radius: 15px; 20 cursor: pointer; 21 } 22 23 .aa:hover{ 24 margin-right:15px; 25 }
效果
-
AA
-
EE
-
II
-
CC
-
HH
-
WW
-
NN
-
YY
-
PP
-
QQ
-
VV
-
XX