导航栏链接的悬停框问题
Posted
技术标签:
【中文标题】导航栏链接的悬停框问题【英文标题】：Issue with hover boxes for navbar links 【发布时间】：2021-08-03 04:22:36 【问题描述】：我是网络开发的新手。
我使用 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;
如果您需要，这里是 codepen 的链接： https://codepen.io/sevilu6/pen/gOmPoZr
【问题讨论】：
【参考方案1】：我想我明白你在说什么了。您只在悬停时应用边框半径。您还应该将其应用于元素，而不需要任何伪。
.nav-link
border-radius: 30px;
【讨论】：
解决了！谢谢。我不敢相信它是那么简单以上是关于导航栏链接的悬停框问题的主要内容，如果未能解决你的问题，请参考以下文章