javascript - 扩展 css div 的问题

Question

我有一些在悬停事件时展开的图 block ，但它们的一部分被相邻的图 block 覆盖，我该如何解决这个问题？

CSS 代码片段:

.tile {
  position: absolute;
  width: 86px;
  background-color: #000000;
  height: 86px;
  color: #fff;
  transition: 1s linear all;
  overflow: hidden;
}
.tile:hover {
  background-color: #333333;
  height: 172px;
  width: 172px;
}

这是我的 fiddle 的链接:https://jsfiddle.net/zjcfope1/

Answer 1

将 z-index 添加到图 block 类。查看这个更新的 fiddle

.tile {
 position: absolute;
 width: 86px;
 background-color: #000000;
 height: 86px;
 color: #fff;
 transition: 1s linear all;
 overflow: hidden;
 z-index: -9999;
}

.tile:hover {
 background-color: #333333;
 height: 172px;
 width: 172px;
 z-index: 9999;
}