Question

我有这段代码：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）（因为行与该部分重叠）。我该如何解决这个问题？

Answer 1

将pointer-events添加到您的css规则中，rhombus将获得hover效果。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: