左
右
Hover me!
效果如下:
我们可以发现,除了右块 之外,都被遮住了,嗯,正常现象。
接下来我们只需要让这几个块退到边缘即可。
代码如下:
.block_hoverer { position: absolute; z-index: 1; width: 100%; height: 100%; transition: all 0.3s ease; } .block_hoverer:nth-child(1) { background: red; top: -90%; } .block_hoverer:nth-child(2) { background: lime; top: 90%; } .block_hoverer:nth-child(3) { background: orange; left: -90%; } .block_hoverer:nth-child(4) { background: blue; left: 90%; }
效果如下:
然后我们加上过渡:
.block_hoverer { transition: all 0.3s ease; } .block_hoverer:hover { opacity: 1; top: 0; left: 0; }
效果如下:
一步就是隐藏起来:
.block { position: relative; display: inline-block; overflow: hidden; width: 10em; height: 10em; vertical-align: middle; } .block_hoverer { opacity: 0; } .block_hoverer:hover { opacity: 1; }
效果如下:
所以我们有完整代码如下:
从不同方向使鼠标指针移过下面的内容
↓
→1