javascript - Anchor ul-li点击链接后闪烁/闪烁问题

Question

我决定做一个li悬停效果。光标悬停在 上anchor li，li向下移动以模拟点击效果。

每次li单击后，我都会看到一闪anchor li背景。

我用谷歌搜索了原始内容（或 FOOC）的 Flash 添加了类似的问题，但找不到正确的答案:(

@charset "utf-8";
/* CSS Reset styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,form,label,legend,caption,tfoot,thead 
{margin:0;padding:0;border:0;outline:0;background:transparent;}

body {line-height:1;}
ol,ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {border-collapse: collapse;border-spacing: 0;} 
html, body {height: 100%;}
h1 {font-size:1.35em;} h2 {font-size:1.25em;} h3 {font-size: 1.15em;} h4 {font-size: 1.1em;} h5 {font-size: 1em;}
a img  {border:0 none;}
a {text-decoration:none}
div, header, aside, section {box-sizing: border-box;}
.clr {clear:both;height:1px;font:1px/1px sans-serif;}

body{background-color:#5c8d9f; }

#container {
	margin:0 auto; overflow: hidden; display: flex;
	width:100%; height: 100%; max-width:1366px; border-left: 1px solid #f5f5f5;
	background:#3b3f42 ;font-family: Helvetica, Arial, sans-serif; 
}

#sidebar {
	width: 180px;height: 100%; border-right: 0px solid #1c1e20;
	font-size: 15px;text-shadow:1px 1px 2px rgb(0, 0, 0);}
#sidebar a:link, a:visited {color:#9fa8b0;}
#sidebar a:hover {color:#fff !important;  }
#sidebar a:focus {color:#6e7a84 !important;}
#sidebar ul li {border-top: 1px solid #4c5052;border-bottom: 1px solid #1c1e20; }
#sidebar ul span {padding-right: 5px; }
#sidebar ul a { 
	display: block;width: 180px;box-sizing: border-box;
	padding: 7px 2px 7px 10px;vertical-align: middle; text-decoration: none;}

#sidebar ul li a:active {padding: 8px 2px 6px 10px;box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 20px #193047;}
#sidebar ul li.active a {background: red; color:rgba(255, 255, 0, 0.9);}
#sidebar ul li.active {border-top: 1px solid #282a2d;}
#sidebar ul li.active span {color: #e1533d;}	
#sidebar ul li.active:hover span {color: #fff;}
#sidebar ul li a:hover {background: #125072;background: -moz-linear-gradient(#0186ba,  #125072);}

#sidebar ul li.active a:focus span {color:#6e7a84;}
#logo {
	margin: 0 auto; box-sizing: border-box;
	width: 200px; height: 45px;	border-bottom: 1px solid #1c1e20;
	
}

/*--- Content ---*/

#content {width:100%;height:100%; overflow: hidden; padding-top: 45px; padding-bottom: 1px;}
/*--- Header ---*/

header {
	display: flex;margin-top: -45px;border-bottom: 1px solid #1c1e20;height:45px; border-left: 1px solid #1c1e20;
	color:#fff;font-family: SourceSansb, sans-serif; 
}

/*--- Header menu ---*/	
#menu ul {margin: 0; overflow: hidden;padding:0;text-shadow:1px 1px 2px rgb(0, 0, 0);}
#menu ul li {float: left;box-sizing: border-box;}
#menu ul li a {
  	float: left;height: 44px;box-sizing: border-box;
    color:#d6d6d6;line-height:24px;
    padding: 10px 20px;
    background:#3C4042;
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    border-left: 1px solid #4c5052;
    border-right: 1px solid #1c1e20;
  
}
#menu ul li.active a {
    background: #282a2d;
	box-shadow: inset 0 5px 20px #282a2d;
	color:rgba(255, 255, 0, 0.9);
}
#menu li ul {
    background:#3C4042;
    background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    left: -999em;
    margin: 35px 0 0;
    position: absolute;
    width: 160px;
    z-index: 9999;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    border: 1px solid rgba(0, 0, 0, 0.5);
}
#menu li ul a {
    background: none;
    border: 0 none;
    margin-right: 0;
    width: 120px;
    box-shadow: none;
    -moz-box-shadow: none;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}
#menu ul li a:hover, #menu ul li:hover > a {
    color: #fff;
    background: #125072;
    background: -moz-linear-gradient(#0186ba,  #125072);
}
#menu ul li a:active  {padding: 11px 20px 9px;box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 20px #193047; color: #6e7a84;
}


section {
	overflow-y: scrolls;overflow-x: hidden;box-sizing: border-box;
	width:100%; height:100% !important;color:#3c4148; margin: 2px; padding:15px 2px 10px 2px; 
	border:0px solid #d1d1d1;
	text-align:center;background-color: #eeeeee; font-family: arial, helvetica sanserif;
}

.under {
	display: flex; align-items: center; justify-content: center;
	height:100%;
}



#test1  {margin-top: 10px; text-align: left;font-family: ;	
}
#test2  {margin-top: 10px; text-align: left;font-family: ;	
}
#test3  {margin-top: 10px; text-align: left;font-family: ;	
}
#test4  {margin-top: 10px; text-align: left;font-family: ;	
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="UTF-8">
<link href="favicon.ico"	rel="shortcut icon"	type="image/x-icon"  />
<link href="css/style.css"	rel="stylesheet"	type="text/css"  />
<link href="css/fonts.css"	rel="stylesheet"	type="text/css"  />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"> </script>
<script type="text/javascript" src="js/scripts.js"> </script>
<script type="text/javascript">

$(document).ready(function() { 
	
	act='test';
	if ( act == "") $('#index').addClass('active');
	else  $('#test').addClass('active');

});

</script>
</head>

<body>
<div id="container">
<aside id="sidebar">
<div id="logo"><br/></div>
	<ul class="nav">
		<li id="index" class=""><a href="index.php"><span class="glyphicons glyphicons-home"></span>
			Home</a></li>
		<li id="status" class=""><a href="?status"><span class="glyphicons glyphicons-table"></span>
			Status</a></li>
		<li id="test" class=""><a href="?test"><span class="glyphicons glyphicons-text-resize"></span>
			Test</a></li>

	</ul>
	
</aside><!--end sidebar -->
    


<div id="content">	
<header>
    
	<nav id="menu">
		<ul>
			<li id="pubs" class=""><a href="?pubs" >PUBS</a></li>
			<li id="personal" class=""><a href="?personal">PERSONAL</a>
			</li>
		
		</ul>
	</nav><!--end menu_line -->
</header><!--end header -->


<section>

<br />
Test


<hr/>

<br />

<div id="test1" >
1		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br/>
	
</div>

</section><!--end data-->
</div><!--end content-->
</div><!--end container-->
</body>
</html>

我在这里上传了一个片段。

谁能建议我如何阻止这种情况发生？

感谢您提供的任何帮助或建议！

标签： javascriptjquerycss