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 class。我改变了它的高度，现在按钮可以很好地悬停了。

scss 悬停不起作用

scss hover not working

css

frontend

sass

hover