我决定进行li悬停效果。
anchor li上的光标悬停，li上移以模拟点击效果。
每次点击li之后，我都会看到anchor li背景的一瞬。
我用Google搜索原始内容（或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>
我上传了一个片段here。
有人可以建议我如何阻止这种情况发生吗？
感谢您的任何帮助或建议！