0
我有一個彈出窗口，顯示導航鏈接。每當用戶懸停在鏈接上，我都會在其周圍顯示一個白色邊框。我的問題是，來自邊界的1px正在導致導航鏈接看起來像是有點晃動。我能做些什麼來使導航鏈接保持固定而不移動？懸停的邊框讓詞語看起來像在顫抖
要在片段中看到此內容，請點擊第二張圖片，彈出窗口將會出現。 然後只需將鼠標懸停在文字上即可。
$('.nav-popup').hide();
$("#nav-btn").on("click", function (event) {
\t $('.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 {
\t width: 100%;
\t height: 100vh;
\t background: rgba(0,0,0,0.8);
\t color: #FFF;
\t position: fixed;
\t z-index: 100;
\t margin: 0;
\t padding: 0;
\t top:0;
\t bottom:0;
}
.popup-close {
\t position: absolute;
\t top: 50px;
\t 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 {
\t position: relative;
\t height: 100%;
}
#nav-list {
\t -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
\t top: 50%;
left: 50%;
\t position: absolute;
\t text-align: center;
}
.nav-item {
\t display: block;
\t margin: 50px 0;
\t font-weight: bold;
\t font-size: 2.5em;
}
.nav-item a {
\t color: #FFF;
\t text-decoration: none;
\t transition: 0.2s ease;
}
.nav-item a:hover {
\t color: #BFBFBF;
\t border: 1px solid #FFF;
\t padding: 15px;
\t border-radius: 7px;
\t transition: 0.2s ease;
} \t<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
\t <div id="logo">
\t \t <img src="/images/eslich.png" alt="">
\t </div>
\t <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>
\t <div class="nav-popup" data-popup="popup-1">
\t \t <div class="nav-popup-inner">
\t \t \t <ul id="nav-list">
\t \t \t \t <li class="nav-item"><a href="#">HOME</a></li>
\t \t \t \t <li class="nav-item"><a href="#">SERVICES</a></li>
\t \t \t \t <li class="nav-item"><a href="#">PROJECTS</a></li>
\t \t \t \t <li class="nav-item"><a href="#">ABOUT</a></li>
\t \t \t \t <li class="nav-item"><a href="#">SAFETY</a></li>
\t \t \t \t <li class="nav-item"><a href="#">CONTACT</a></li>
\t \t \t </ul>
\t \t \t \t <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>
\t \t </div>
\t </div>
</header>
我不認爲我得到它。我根本看不到任何「搖晃」的鏈接。也許是一個crossbrowser問題？ – Anna