scss悬停不工作答案

【问题标题】：scss hover not workingscss悬停不工作
【发布时间】：2016-07-10 14:13:40
【问题描述】：

我在悬停时遇到了一些问题，它可以在相同的代码 (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>

【问题讨论】：

目前您说 div 是 .arithmetics 的子级。对吗？
是的，我希望悬停在 div 上工作
我总是尝试调试，给我正在搜索的元素一个红色背景。尝试将其添加到“div”元素中，以确保它位于正确的开始位置

标签： css sass hover frontend

【解决方案1】：

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

【讨论】：