0
ナビゲーションリンクを表示するポップアップウィンドウがあります。ユーザーがリンク上を移動するたびに、その周りに白い枠線が表示されます。私の問題は、国境からの1pxが、わずかに揺れているように見えるようにナビゲーションリンクを引き起こしていることです。ナビゲーションリンクを固定して移動させないようにするにはどうすればよいですか？ホバリングボーダーは、揺れているように見えます。
スニペットでこれを確認するには、2番目の画像をクリックするとポップアップが表示されます。 次に、テキストの上にマウスを置くだけです。
$('.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>
私はそれを得るとは思いません。私は全く「揺れ」のリンクを見ることができません。多分クロスブラウザの問題？ – Anna