图标缩排和悬浮突显的简单实现

场景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
posted on 2019-05-04 21:52  Sabrina_Yu  阅读(222)  评论(0)  编辑  收藏  举报