Html 图像（div的子对象），但在其外部，不激活悬停效果

所以我想要的是：当光标移到图像（菱形）上时，不激活八角形的悬停

以下是一个例子：

---

添加

指针事件：无至
.diamond



正文{
背景色：#ba2020；
}
八角形优先{
宽度：164px；
高度：68px；
位置：绝对位置；
背景：黑色；
顶部：200px；
左：1000px；
颜色：白色；
字体大小：30px；
-webkit变换：旋转（-16度）；
-moz变换：旋转（-16度）；
-ms变换：旋转（-16度）；
-o变换：旋转（-16度）；
变换：旋转（-16度）；
}
八角体{
宽度：100%；
身高：100%；
背景：继承；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
.八角形2{
宽度：100%；
身高：100%；
显示：继承；
背景：继承；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}
八角体{
宽度：100%；
身高：100%；
显示：继承；
背景：继承；
-webkit变换：旋转（135度）；
-moz变换：旋转（135度）；
-ms变换：旋转（135度）；
-o变换：旋转（135度）；
变换：旋转（135度）；
}
.文本{
显示：块；
位置：绝对位置；
z指数：1000；
-webkit变换：旋转（16度）；
-moz变换：旋转（16度）；
-ms变换：旋转（16度）；
-o变换：旋转（16度）；
变换：旋转（16度）；
}
.首先{
左：35px；
顶部：10px；
}
.octagonFirst:悬停{
背景：白色；
颜色：黑色；
}
戴蒙德先生{
宽度：206px；
高度：202px；
位置：绝对位置；
背景图像：url（'http://i.imgur.com/Yyv3dht.png');
排名：0；
指针事件：无；
}

当我们悬停钻石图像时，您希望八角形处于悬停状态吗？不，我不希望八角形悬停，当我们悬停钻石图像@imGaurav时
<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>

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