html - 悬停div重叠，部分现在不悬停:z-index不起作用

我有以下代码：http://codepen.io/anon/pen/jbQQWo
（实际上我有更多的行和div，但这足以理解）

 <div class= "row">
          <div class ="rhombus" id = "r1c"></div>
          <div class ="rhombus" id = "r2c"></div>
 </div>
 <div class= "row2">
          <div class ="rhombus" id = "r3c"></div>
 </div>

.rhombus {
  width: 32vw;
    height: 32vw;
  margin: -3.5vw 6.8vw;
  background: #000;
  color: #fff;
  transform: scaleY(.575) rotate(45deg) ;
  float:left;
}

.row
{
 position: absolute;

   margin-top: 0vw;

}

.row2
{
  margin-left: 22.8vw;
 margin-top: 13.2vw;
   position: absolute;
}

.rhombus:hover
{
    background-color: red;
}

如您在演示中所见，左下方不起作用（rc2），而右下方（rc1）（因为该行与该部分重叠）。我怎样才能解决这个问题？

最佳答案

通过将pointer-events添加到CSS规则，您的rhombus将获得hover效果。

.row2, .row {
  pointer-events: none;
}

.rhombus {
  width: 32vw;
  height: 32vw;
  margin: -3.5vw 6.8vw;
  background: #000;
  color: #fff;
  transform: scaleY(.575) rotate(45deg) ;
  float:left;
  pointer-events: auto;
}

.row2 {
  margin-left: 22.8vw;
  margin-top: 13.2vw;
  position: absolute;
}

.rhombus:hover {
  background-color: red;
}

<div class= "row">
  <div class ="rhombus" id = "r1c"></div>
  <div class ="rhombus" id = "r2c"></div>
</div>
<div class= "row2">
  <div class ="rhombus" id = "r3c"></div>
</div>

关于html - 悬停div重叠，部分现在不悬停:z-index不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33659648/