如何将鼠标悬停在此字段上时摆脱闪烁的字段和光标？

Question

有 2 部分代码，第一部分用于桌面版本，第二部分用于移动版本。第一个版本工作正常（第一个图像）在此处输入图像描述，移动版本中出现错误，当您将鼠标悬停在列表项悬停上时，效果不起作用，出现边框颜色（背景（第二图像））在此处输入图像描述，如果将光标移动到此边框，悬停工作，但字段本身开始闪烁。如果在移动版本的代码中输入列表项的尺寸，如在大型监视器的版本中，即复制规则，则字段和光标都会闪烁。如何解决这种情况，使悬停效果不闪烁，而不是彩色边框的外观？下面是问题所在地的 html 和 css，仅用于 java 脚本。

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

}

Answer 1

您需要从函数中删除以下行。openMenu$('div.menu-bg').addClass('animate');&nbsp; &nbsp;请查看更新后的功能。openMenuif( 'ontouchstart' in window ){ var click = 'touchstart'; }&nbsp; else { var click = 'click'; }&nbsp; $('div.burger').on(click, function(){&nbsp; &nbsp; &nbsp; if( !$(this).hasClass('open') ){ openMenu(); }&nbsp;&nbsp; &nbsp; &nbsp; else { closeMenu(); }&nbsp; &nbsp; });&nbsp; $('div.menu ul li a').on(click, function(e){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; closeMenu();&nbsp; });&nbsp; function openMenu(){&nbsp; &nbsp; &nbsp; &nbsp; (document.getElementById("see").setAttribute("style", "display: block;"));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //Remove this line&nbsp; &nbsp; // $('div.menu-bg').addClass('animate');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('div.burger').addClass('open');&nbsp;&nbsp; &nbsp; $('div.x, div.z').addClass('collapse');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; setTimeout(function(){&nbsp;&nbsp; &nbsp; &nbsp; $('div.y').hide();&nbsp;&nbsp; &nbsp; &nbsp; $('div.x').addClass('rotate30');&nbsp;&nbsp; &nbsp; &nbsp; $('div.z').addClass('rotate150');&nbsp;&nbsp; &nbsp; }, 70);&nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; $('div.x').addClass('rotate45');&nbsp;&nbsp; &nbsp; &nbsp; $('div.z').addClass('rotate135');&nbsp;&nbsp;&nbsp; &nbsp; }, 120);&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; function closeMenu(){&nbsp; &nbsp; &nbsp; &nbsp; $('.menu li').removeClass('animate');&nbsp; &nbsp; &nbsp; &nbsp; (document.getElementById("see").setAttribute("style", "display: none;"));&nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('div.burger').removeClass('open');&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('div.x').removeClass('rotate45').addClass('rotate30');&nbsp;&nbsp; &nbsp; &nbsp; $('div.z').removeClass('rotate135').addClass('rotate150');&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('div.menu-bg').removeClass('animate');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('div.x').removeClass('rotate30');&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('div.z').removeClass('rotate150');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }, 50);&nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('div.y').show();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('div.x, div.z').removeClass('collapse');&nbsp; &nbsp; &nbsp; }, 70);&nbsp; &nbsp; }, 100);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }body {&nbsp;background: blue;&nbsp;}.nav {&nbsp; height: 100vh;&nbsp; position: relative;&nbsp; outline: none;}.nav ul {&nbsp; list-style: none;&nbsp; padding: 0.5em 0;&nbsp; margin: 0;}.nav ul li {&nbsp; margin: 10px;&nbsp; width: 300px;&nbsp; height: 40px;&nbsp; line-height: 40px;&nbsp; background-color: white;&nbsp; padding: 0.5em 1em 0.5em 1em;&nbsp; font-size: 24px;&nbsp; background-repeat: no-repeat;&nbsp; background-position: left 15px center;&nbsp; background-size: auto 40px;&nbsp; transition: all 0.15s linear;&nbsp; border-radius: 5px;&nbsp; border: 1px solid black;&nbsp; opacity: 0.75;}.nav img {&nbsp; float: left;}.menu li:hover {&nbsp; background-color: #ffffff;&nbsp; opacity: 1;}@media screen and (max-width: 900px) {.menu {&nbsp; display: none;}div.burger {&nbsp; height: 30px;&nbsp;&nbsp; width: 40px;&nbsp; position: absolute;&nbsp; top: 11px;&nbsp;&nbsp; left: 21px;}&nbsp; div.x,&nbsp; div.y,&nbsp; div.z {&nbsp; &nbsp; position: absolute; margin: auto;&nbsp; &nbsp; top: 0px; bottom: 0px;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; background: #fff;&nbsp; &nbsp; border-radius:2px;&nbsp; &nbsp; -webkit-transition: all 200ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 200ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 200ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 200ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 200ms ease-out;&nbsp; }&nbsp; &nbsp;&nbsp; div.x, div.y, div.z { height: 3px; width: 26px; }&nbsp; div.y {top: 18px;}&nbsp; div.z {top: 37px;}&nbsp; div.collapse {&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; -webkit-transition: all 70ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 70ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 70ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 70ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 70ms ease-out;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; div.rotate30 {&nbsp; &nbsp; -ms-transform: rotate(30deg);&nbsp;&nbsp; &nbsp; &nbsp; -webkit-transform: rotate(30deg);&nbsp;&nbsp; &nbsp; &nbsp; transform: rotate(30deg);&nbsp;&nbsp; &nbsp; -webkit-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; div.rotate150 {&nbsp; &nbsp; -ms-transform: rotate(150deg);&nbsp;&nbsp; &nbsp; &nbsp; -webkit-transform: rotate(150deg);&nbsp;&nbsp; &nbsp; &nbsp; transform: rotate(150deg);&nbsp;&nbsp;&nbsp; &nbsp; -webkit-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 50ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; div.rotate45 {&nbsp; &nbsp; -ms-transform: rotate(45deg);&nbsp;&nbsp; &nbsp; &nbsp; -webkit-transform: rotate(45deg);&nbsp;&nbsp; &nbsp; &nbsp; transform: rotate(45deg);&nbsp;&nbsp; &nbsp; -webkit-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; div.rotate135 {&nbsp; &nbsp; -ms-transform: rotate(135deg);&nbsp;&nbsp; &nbsp; &nbsp; -webkit-transform: rotate(135deg);&nbsp;&nbsp; &nbsp; &nbsp; transform: rotate(135deg);&nbsp;&nbsp;&nbsp; &nbsp; -webkit-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp;-moz-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 100ms ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }div.menu-bg {&nbsp;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp;&nbsp; position:absolute;&nbsp; top:0;&nbsp; left:0;&nbsp; background:#203d63;&nbsp; opacity:0;&nbsp; -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp;-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp;}div.menu-bg.animate{&nbsp; opacity:0.9;&nbsp; -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp;-moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; &nbsp;-o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;}ul.menu {&nbsp; padding-top: 5em;}ul.menu li {&nbsp; width:300px;&nbsp; margin: 0 auto;}ul.menu span {&nbsp; text-align: right;}ul.menu li a {&nbsp; background-color: white;&nbsp; color:rgb(0, 0, 0);&nbsp;&nbsp; opacity: 0.75;}section > div {&nbsp; transition: transform 1s;&nbsp; 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">&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="burger"><div class="x"></div><div class="y"></div><div class="z"></div></div>&nbsp;</nav>