元素hover时渐隐渐现弹窗（纯CSS）

发表于

若直接用display:none和display:block则没有渐隐渐进效果，而如果直接用opacity:0和opacity:1则占据多余的空间，鼠标没有放在图标上也会出现layer。而用visibility:hidden和visibility:visible则可避免这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.icn {
  margin: 0 30px;
  cursor: pointer;
  position: relative;
  .m-layer {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
  }
  &:hover {
    .m-layer {
      visibility: visible;
      opacity: 1;
    }
  }
}