文章/答案/技术大牛

发布

社区首页 >问答首页 >导航栏链接的悬停框问题

问导航栏链接的悬停框问题
EN

Stack Overflow用户

提问于 2021-05-13 03:22:22

回答 1查看 28关注 0票数 1

我对web开发还是个新手。

我使用Bootstrap创建了一个导航栏，并在链接中添加了:hover。我还给悬停框一个颜色，并使角落变圆。

当我将鼠标悬停在链接上时，该框会旋转(如预期的那样)。问题是当我将鼠标悬停在链接上时，它会回到一个框中。我试着寻找答案，但没有运气。

我只希望每个链接的容器大小相同，并且在链接上下悬停时保持不变。

我将尝试添加我的代码，以便你们都能看到我在使用什么。

下面是我的HTML代码：

<body>
  <!-- Navbar -->
    <nav class="navbar navbar-expand-lg py-4 navbar-dark" style="background-color: #000000;">
        <div class="container-fluid">
          <a class="navbar-brand mb-0 h1 text-white fs-1 px-4" href="#">Name</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ms-auto px-4">
              <a class="nav-link active text-light fs-5 mx-2 nav-active" aria-current="page" href="#">Home</a>
              <a class="nav-link text-secondary fs-5 mx-3" href="#">Link 1</a>
              <a class="nav-link text-secondary fs-5 mx-3" href="#">Link 2</a>
              <a class="nav-link text-secondary fs-5 mx-3" href="#">Link 3</a>
              <a class="nav-link text-secondary fs-5 mx-3" href="#">Link 4</a>
            </div>
          </div>
        </div>
      </nav>

下面是我的CSS代码：

body {
    background-color: #252525;
}

.nav-link:hover {
    color: white;
    background-color: #48e0e4;
    border-radius: 30px;
    transition: 0.5s;
}

.nav-active {
    color: white;
    background-color: #48e0e4;
    border-radius: 30px;
    
}

如果您需要，这里有一个指向代码的链接：https://codepen.io/sevilu6/pen/gOmPoZr

html

css

hover

navbar

border-radius

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-13 03:30:44

我想我明白你在说什么了。仅在悬停时应用边界半径。您还应该将其应用于不带任何伪元素的元素。

.nav-link {
border-radius: 30px;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67509833

复制

相似问题

问导航栏链接的悬停框问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏链接的悬停框问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏链接的悬停框问题
EN