scss悬停不起作用

Question

我在悬停时有一些问题，它在相同的代码（css）中工作正常，但不是scss。 如果是问题，我会故意设置z-index，但它不是。

.arithmetics{
    height: 2.5em;
    width:  100%;
    text-align: center;

    div{
      width: 25%;
      font-size: 2em;
      line-height: 1.2em;
      display: inline-block;
      color: rgba(33, 33, 33, 0.79);
      vertical-align: top;
      background-color: rgba(218, 111, 111, 0.51);
      float: left;
      z-index: 10;

      &:hover{
        background-color: rgba(255, 179, 179, 0.51);
      }
    }
  }



  <div class="arithmetics">
    <div>+</div>
    <div>-</div>
    <div>/</div>
    <div>X</div>
  </div>

Answer 1

好的我刚刚解决了这个问题，显然另一个div覆盖了.arithmetics类。我改变了它的高度，按钮现在悬停得很好。