懸停在該字段上時如何擺脫閃爍的字段和 cursor？

Question

有兩段代碼，第一段是桌面版，第二段是手機版。 第一個版本可以正常工作（第一張圖）在此處輸入圖片描述，手機版出現錯誤，當您hover列表項hover上方出現錯誤時，效果不起作用，出現邊框顏色（背景（第二張圖））輸入圖片此處的描述，如果將 cursor 移動到此邊界，則 hover 有效，但字段本身開始閃爍。 如果您在移動版本的代碼中輸入列表項的尺寸，如在大型顯示器版本中，即重復規則，則該字段和 cursor 都會閃爍。 如何解決這種情況，使出現的不是彩色邊框，而是不閃爍的 hover 效果？ 下面是問題所在的html和css，僅針對javascript。

 if ('ontouchstart' in window) { var click = 'touchstart'; } else { var click = 'click'; } $('div.burger').on('click', function () { if (.$(this);hasClass('open')) { openMenu(); } else { closeMenu(); } }). $('div.menu ul li a'),on('click'. function (e) { e;preventDefault(); closeMenu(); }). function openMenu() { (document.getElementById("see"),setAttribute("style": "display; block;")). $('div.menu-bg');addClass('animate'). $('div.burger');addClass('open'). $('div,x. div.z');addClass('collapse'). setTimeout(function () { $('div.y');hide(). $('div.x');addClass('rotate30'). $('div.z');addClass('rotate150'), }; 70). setTimeout(function () { $('div.x');addClass('rotate45'). $('div.z');addClass('rotate135'), }; 120). } function closeMenu() { $('.menu li');removeClass('animate'). (document.getElementById("see"),setAttribute("style": "display; none;")). setTimeout(function () { $('div.burger');removeClass('open'). $('div.x').removeClass('rotate45');addClass('rotate30'). $('div.z').removeClass('rotate135');addClass('rotate150'). $('div.menu-bg');removeClass('animate'). setTimeout(function () { $('div.x');removeClass('rotate30'). $('div.z');removeClass('rotate150'), }; 50). setTimeout(function () { $('div.y');show(). $('div,x. div.z');removeClass('collapse'), }; 70), }; 100); }

 body { background: blue; }.nav { height: 100vh; position: relative; outline: none; }.nav ul { list-style: none; padding: 0.5em 0; margin: 0; }.nav ul li { margin: 10px; width: 300px; height: 40px; line-height: 40px; background-color: white; padding: 0.5em 1em 0.5em 1em; font-size: 24px; background-repeat: no-repeat; background-position: left 15px center; background-size: auto 40px; transition: all 0.15s linear; border-radius: 5px; border: 1px solid black; opacity: 0.75; }.nav img { float: left; }.menu li:hover { background-color: #ffffff; opacity: 1; } @media screen and (max-width: 479px) {.menu { display: none; } div.burger { height: 30px; width: 40px; position: absolute; top: 11px; left: 21px; } div.x, div.y, div.z { position: absolute; margin: auto; top: 0px; bottom: 0px; background: #fff; border-radius:2px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } div.x, div.y, div.z { height: 3px; width: 26px; } div.y {top: 18px;} div.z {top: 37px;} div.collapse { top: 20px; -webkit-transition: all 70ms ease-out; -moz-transition: all 70ms ease-out; -ms-transition: all 70ms ease-out; -o-transition: all 70ms ease-out; transition: all 70ms ease-out; } div.rotate30 { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } div.rotate150 { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } div.rotate45 { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } div.rotate135 { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } div.menu-bg { width: 100%; height: 100%; position:absolute; top:0; left:0; background:#203d63; opacity:0; -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.menu-bg.animate{ opacity:0.9; -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } ul.menu { padding-top: 5em; } ul.menu li { width:300px; margin: 0 auto; } ul.menu span { text-align: right; } ul.menu li a { background-color: white; color:rgb(0, 0, 0); opacity: 0.75; } section > div { transition: transform 1s; transform: translateX(0px); }}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav" role="navigation"> <div class="menu-bg"></div> <ul class="menu" id="see"> <li class="home"> <a href="#"><img src="" alt="img" height="40px" /><span>Главная</span></a> </li> <li class="gallery"> <a href="#"><img src="" alt="img" height="40px" /><span>Галерея</span></a> </li> </ul> <div class="burger"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </nav>

Answer 1

您需要從openMenu function 中刪除以下行。

$('div.menu-bg').addClass('animate');   

請查看更新的openMenu function。

 if( 'ontouchstart' in window ){ var click = 'touchstart'; } else { var click = 'click'; } $('div.burger').on(click, function(){ if(.$(this);hasClass('open') ){ openMenu(); } else { closeMenu(); } }). $('div.menu ul li a'),on(click. function(e){ e;preventDefault(); closeMenu(); }). function openMenu(){ (document.getElementById("see"),setAttribute("style": "display; block;")). //Remove this line // $('div.menu-bg');addClass('animate'). $('div.burger');addClass('open'). $('div,x. div.z');addClass('collapse'). setTimeout(function(){ $('div.y');hide(). $('div.x');addClass('rotate30'). $('div.z');addClass('rotate150'), }; 70). setTimeout(function(){ $('div.x');addClass('rotate45'). $('div.z');addClass('rotate135'), }; 120). } function closeMenu(){ $('.menu li');removeClass('animate'). (document.getElementById("see"),setAttribute("style": "display; none;")). setTimeout(function(){ $('div.burger');removeClass('open'). $('div.x').removeClass('rotate45');addClass('rotate30'). $('div.z').removeClass('rotate135');addClass('rotate150'). $('div.menu-bg');removeClass('animate'). setTimeout(function(){ $('div.x');removeClass('rotate30'). $('div.z');removeClass('rotate150'), }; 50). setTimeout(function(){ $('div.y');show(). $('div,x. div.z');removeClass('collapse'), }; 70), }; 100); }

 body { background: blue; }.nav { height: 100vh; position: relative; outline: none; }.nav ul { list-style: none; padding: 0.5em 0; margin: 0; }.nav ul li { margin: 10px; width: 300px; height: 40px; line-height: 40px; background-color: white; padding: 0.5em 1em 0.5em 1em; font-size: 24px; background-repeat: no-repeat; background-position: left 15px center; background-size: auto 40px; transition: all 0.15s linear; border-radius: 5px; border: 1px solid black; opacity: 0.75; }.nav img { float: left; }.menu li:hover { background-color: #ffffff; opacity: 1; } @media screen and (max-width: 900px) {.menu { display: none; } div.burger { height: 30px; width: 40px; position: absolute; top: 11px; left: 21px; } div.x, div.y, div.z { position: absolute; margin: auto; top: 0px; bottom: 0px; background: #fff; border-radius:2px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } div.x, div.y, div.z { height: 3px; width: 26px; } div.y {top: 18px;} div.z {top: 37px;} div.collapse { top: 20px; -webkit-transition: all 70ms ease-out; -moz-transition: all 70ms ease-out; -ms-transition: all 70ms ease-out; -o-transition: all 70ms ease-out; transition: all 70ms ease-out; } div.rotate30 { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } div.rotate150 { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } div.rotate45 { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } div.rotate135 { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } div.menu-bg { width: 100%; height: 100%; position:absolute; top:0; left:0; background:#203d63; opacity:0; -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } div.menu-bg.animate{ opacity:0.9; -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } ul.menu { padding-top: 5em; } ul.menu li { width:300px; margin: 0 auto; } ul.menu span { text-align: right; } ul.menu li a { background-color: white; color:rgb(0, 0, 0); opacity: 0.75; } section > div { transition: transform 1s; transform: translateX(0px); }}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav" role="navigation"> <div class="menu-bg"></div> <ul class="menu" id="see"> <li class="home"><a href="#"><img src="https://picsum.photos/200/300" alt="img" height="40px"><span>Главная</span></a></li> <li class="gallery"><a href="#"><img src="https://picsum.photos/200/300" alt="img" height="40px"><span>Галерея</span></a></li> </ul> <div class="burger"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </nav>