图像（div的孩子）但在它之外，不激活悬停效果

Question

所以我想要的是：当光标越过图像（菱形）时，不激活八边形的悬停。

以下是示例：

http://codepen.io/Chrez/pen/yYajGo

<li>
  <a href="#">
    <div class="octagonFirst">

      <div class="octagonIn1">
        <div class="octagonIn2">
          <div class="octagonIn3"></div>
        </div>
      </div>

      <span class="text First">Startseite</span>
      <div class="diamond"></div>

    </div>
  </a>
</li>

CCS：

body {
  background-color: #ba2020;
}
.octagonFirst {

    width: 164px;
    height: 68px;
    position: absolute;
    background: black;
    top: 200px;
    left: 1000px;
    color: white;
    font-size: 30px;
    -webkit-transform: rotate(-16deg);
       -moz-transform: rotate(-16deg);
        -ms-transform: rotate(-16deg);
         -o-transform: rotate(-16deg);
            transform: rotate(-16deg);
}
.octagonIn1 {
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.octagonIn2 {
    width: 100%;
    height: 100%;
    display: inherit;
    background: inherit;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

.octagonIn3 {
    width: 100%;
    height: 100%;
    display: inherit;
    background: inherit;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}
.text {
    display: block;
    position: absolute;
    z-index: 1000;
    -webkit-transform: rotate(16deg);
       -moz-transform: rotate(16deg);
        -ms-transform: rotate(16deg);
         -o-transform: rotate(16deg);
            transform: rotate(16deg);
}
.First {
    left: 35px;
    top: 10px;
    }
.octagonFirst:hover {
    background: white;
    color: black;
}

.diamond {
    width: 206px;
    height: 202px;
    position: absolute;
    background-image: url('http://i.imgur.com/Yyv3dht.png');
    top: 0;
}

Answer 1

将pointer-events: none;添加到.diamond

codepen

＆＃13;

＆＃13;

body {
  background-color: #ba2020;
}

.octagonFirst {
  width: 164px;
  height: 68px;
  position: absolute;
  background: black;
  top: 200px;
  left: 1000px;
  color: white;
  font-size: 30px;
  -webkit-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  transform: rotate(-16deg);
}

.octagonIn1 {
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.octagonIn2 {
  width: 100%;
  height: 100%;
  display: inherit;
  background: inherit;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.octagonIn3 {
  width: 100%;
  height: 100%;
  display: inherit;
  background: inherit;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.text {
  display: block;
  position: absolute;
  z-index: 1000;
  -webkit-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -o-transform: rotate(16deg);
  transform: rotate(16deg);
}

.First {
  left: 35px;
  top: 10px;
}

.octagonFirst:hover {
  background: white;
  color: black;
}

.diamond {
  width: 206px;
  height: 202px;
  position: absolute;
  background-image: url('http://i.imgur.com/Yyv3dht.png');
  top: 0;
  pointer-events: none;
}

＆＃13;

<li>
  <a href="#">
    <div class="octagonFirst">
      <div class="octagonIn1">
        <div class="octagonIn2">
          <div class="octagonIn3"></div>
        </div>
      </div>
      <span class="text First">Startseite</span>
      <div class="diamond"></div>
    </div>
  </a>
</li>

＆＃13;

＆＃13;

＆＃13;