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 类。我更改了它的高度，按钮现在悬停正常。