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

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

请查看更新后的功能。openMenu

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>