Мини-тележка WooCommerce мерцает при приближении к ней?

Привет, стек, у меня есть небольшая проблема со странным мерцанием на виджете корзины заголовка в моем Сайт WooCommerce, когда продукт добавлен в корзину. Проблема в том, что когда я приближаюсь к нему, он быстро отображается и исчезает, поэтому клиент не может видеть, что отображается в раскрывающемся виджете. Я думаю, что это проблема 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"});
});

Может кто-нибудь помочь мне перестать это мерцать и быть похожим на тематический демонстрационный сайт?