如何制作:悬停对柔性箱中的父容器是块颜色？

Question

现在，我学习使用flex创建一个导航条，这是我的代码：科德芬

我想要锚定标签在李当悬停时，它会给背景色在李中的整个高度，用sass，像这样：

 ul {
      list-style-type: none;
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 4rem;
      li {
        a {
          text-decoration: none;
          color: $color-0;
        }

        a:hover {
          background-color: $color-8;
        }
      }
    }

由此：

​

对此：

​

Answer 1

在您的ul 选择器中尝试这段样式

 li {
            height:100%;
            width:100%;
            // background-color:#000;
            display:flex;
            justify-content:center;
            align-items:center;
            
            
            a {
              text-decoration: none;
              color: $color-0;
            }
    
                          }
          li:hover{
                background-color:$color-8;
            }

还编辑ul选择器的填充到padding: 0 0 0 2rem;，这样导航链接就会被塞到极右，如图中所示。