CSS div擴展問題

Question

我的磁貼會在懸停事件時擴展，但是它們的一部分會被相鄰的磁貼覆蓋，我該如何解決？

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;
}

這是我的小提琴的鏈接： https : //jsfiddle.net/zjcfope1/

Answer 1

將z-index添加到tile類。 看看這個更新的小提琴

.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;
}

Answer 2

這是您要嘗試的嗎？

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

}