Как избавиться от мигания в поле курсора и чтобы работал hover эффект?

Question

Саня @radio7ananas

Как избавиться от мигания в поле курсора и чтобы работал hover эффект?

Есть 2 участка кода, один для большой версии монитора, второй для мобилок. Первая версия работает корректно (первый скрин), в версии для мобилок появляется такая ерунда, что при наведении на поле пункта списка hover эффект не работает, появляется border цветной (фоновый (второй скрин)), если сдвинут курсор на этот border, то hover работает, но начинается мигание самого поля. Если вписать в код мобильной версии размеры пункта списка, как в версии для больших мониторов, т.е. продублировать правила, то начинается дискотека, мигает и поле, и курсор. Как решить данный вопрос, чтобы вместо появления цветного borderа, был эффект hover и без мигания? Ниже представлен html и css проблемного места, и на всякий javascript.

<code lang="html">
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">		
<li class="home"><a href="#"><img src="" alt="Главная" height="40px"><span>Главная</span></a></li>
<li class="gallery"><a href="#"><img src="" alt="Галерея" height="40px"><span>Галерея</span></a></li>
</ul>			            
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div> 
</nav>
</code>

<code lang="css">
.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);
}}
</code>

<code lang="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);													
		
	}
</code>