Question

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

要在代码段中查看此内容，请点击第二张图片，系统会显示弹出窗口。然后将鼠标悬停在文本上。

＆＃13;

$('.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();
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我最终搞清楚了。我为正常状态添加了透明边框。这就行了。

Answer 2

我发现这是由webkit translate选项引起的。由于您在-50%处进行翻译，因此每次hover时，您的元素都会丢失其height引用并重新定位，从而导致＆＃34;震动＆＃34;效果。

由于您使用此黑客进行垂直对齐，我建议您遵循以下两种方法之一：http://phrogz.net/css/vertical-align/index.html

工作小提琴：https://jsfiddle.net/LvmLjexc/1/

悬停的边界使得文字看起来像是在颤抖

2 个答案: