html - 悬停的边框使文字看起来像是在颤抖

Question

我有一个显示导航链接的弹出窗口。每当用户将鼠标悬停在链接上时，我都会在其周围显示一个白色边框。我的问题是，边框的 1px 导致导航链接看起来像是在轻微晃动。我该怎么做才能使导航链接保持固定不动？

要在代码段中查看此内容，请单击第二张图片，然后会出现弹出窗口。 然后只需将鼠标悬停在文本上即可。

$('.nav-popup').hide();

$("#nav-btn").on("click", function (event) {
	$('.nav-popup').fadeIn(350);
});

  //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
 
        e.preventDefault();
    });

.nav-popup {
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.8);
	color: #FFF;
	position: fixed;
	z-index: 100;
	margin: 0;
	padding: 0;
	top:0;
	bottom:0;
}
.popup-close {
	position: absolute;
	top: 50px;
	right: 50px;
}
#x-close {
  transform: translate(50%, -50%);
  transition: transform .4s ease;
}
#x-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg);
}
.nav-popup-inner {
	position: relative;
	height: 100%;
}
#nav-list {
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	top: 50%;
    left: 50%;
	position: absolute;
	text-align: center;
}
.nav-item {
	display: block;
	margin: 50px 0;
	font-weight: bold;
	font-size: 2.5em;
}
.nav-item a {
	color: #FFF;
	text-decoration: none;
	transition: 0.2s ease;
}
.nav-item a:hover {
	color: #BFBFBF;
	border: 1px solid #FFF;
	padding: 15px;
	border-radius: 7px;
	transition: 0.2s ease;
}	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
	<div id="logo">
		<img src="/images/eslich.png" alt="">
	</div>
	<a href="#0" id="nav-btn"><img src="/icons/mobile_menu_white.png" style="height: 28px; width: 28px;" alt="Website Design Services Mobile Menu Button"></a>
	<div class="nav-popup" data-popup="popup-1">
		<div class="nav-popup-inner">
			<ul id="nav-list">
				<li class="nav-item"><a href="#">HOME</a></li>
				<li class="nav-item"><a href="#">SERVICES</a></li>
				<li class="nav-item"><a href="#">PROJECTS</a></li>
				<li class="nav-item"><a href="#">ABOUT</a></li>
				<li class="nav-item"><a href="#">SAFETY</a></li>
				<li class="nav-item"><a href="#">CONTACT</a></li>
			</ul>
				<a class="popup-close" data-popup-close="popup-1" href="#"><img src="/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"></a>
		</div>
	</div>
</header>

Answer 1

我最终弄明白了这一点。我在正常状态下添加了透明边框。这成功了。