如何制作A：悬停是Flexbox中这些父容器的块颜色？

发布于 2025-02-04 13:17:50 字数 944 浏览 1 评论 0原文

现在，我学会了使用Flex创建一个Navbar，这是我的Codepen： codepen

我想要悬停在li中的锚标签，它将在li中为背景颜色提供整个高度，与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;
        }
      }
    }

由此：

对此：

原文

For now, I learn to create a navbar with flex, This is my codepen : Codepen

I want anchor tag in li when hovering, it will give background color entire height in li,
With sass, like this :

 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;
        }
      }
    }

From this :

To this :

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

漆黑的白昼 2025-02-11 13:17:50

在您的 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选择器的填充编辑为填充：0 0 0 2REM;> ，因此NAV-Links如图所示，被卡住了极端

Try this piece of styling in your ul selector

 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;
            }

Also edit the padding of ul selector to padding: 0 0 0 2rem; so the nav-links get stucked to extreme right as shown in the image

回复收藏 0 原文

~没有更多了~