WooCommerce迷你购物车靠近时会闪烁吗？

Question

您好，堆栈为WooCommerce site时，我的added to cart中的标题购物车小部件上出现奇怪的闪烁，这是一个小问题。问题是当我靠近它时，它会快速显示和消失，因此客户无法看到下拉窗口小部件中显示的内容。我认为这是JS问题，涉及如何称为函数OpenNav()和CloseNav()。这是该代码块的完整CSS：

<div class="cart-widget tooltip">
<span class="tooltiptext"></span><div onmouseover="openNav()" 
onmouseout="closeNav()">
 <a class="cart-contents" href="https://siteurl.com/cart/"><i class="fa 
fa-shopping-cart"></i><div class="cart-crl">1</div></a>
</div><div onmouseover="openNav()" onmouseout="closeNav()" id="mySidenav" 
class="sidenav" style="display: none;"><div id="accordion" 
class="woocommerce">  <div class="sidebar-quickcart">

和CSS：

#accordion ul ul {
 margin:0 20px;
}
#accordion li {
padding: 0;
margin:0;
overflow:hidden;
}
 #accordion{
 padding:20px;
max-height: 550px;
overflow-y: auto;
overflow-x: hidden;
}
#accordion::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
 }

.sidenav{
-webkit-animation: fadeIn .8s; 
 -webkit-animation-fill-mode: both; 
 animation: fadeIn .8s;
 animation-fill-mode: both;
 }
@-webkit-keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
     }

     @keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
     }
#mySidenav a.checkout{
float:right;
}
.woocommerce #mySidenav ul.cart_list li img, .woocommerce .widget 
ul.cart_list li img{
float: left;
margin-left: 0px;
margin-right: 10px;
width: 50px;
height: auto;
box-shadow: none;
}

这是 OpenNav（）和 Closenav（）函数 s：

function openNav(){
document.getElementById("mySidenav").style.display = "block";
}
function closeNav(){
document.getElementById("mySidenav").style.display = "none";
}
var $crtscroll = jQuery('#mySidenav');
jQuery(document).scroll(function() {
$crtscroll.css({display:"none"});
});

有人可以帮我阻止这种闪烁，变得像theme demo site吗？