When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using jQuery. While this solution achieved the desired outcome, it resulted in the background image flickering.
View live site for reference (issue present in the top menu)
HTML:
<ul class="top-menu">
<li>
<a href="#">link 1</a>
<div class="submenu">
<ul>
<li><a href="#">sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
</div>
</li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
Javascript/jQuery:
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
var cover = $(".submenu");
cover.data('timer', setTimeout(function(){
cover.removeClass("myclass');
}, 2000)
);
e.stopPropagation();
});
CSS:
*{
box-sizing:border-box;
}
ul.top-menu {
display:flex;
list-style:none;
text-transform:uppercase;
width:100%;
justify-content:center;
background:white;
position:relative;
}
ul.top-menu li a {
color:black;
padding:10px;
text-decoration:none;
display:block;
}
.submenu {
position:absolute;
background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg");
background-position:right top;
background-size:200px auto;
background-repeat:no-repeat;
width:100%;
top:100%;
left:0;
z-index:0;
}
.submenu:after {
content:"";
background:green;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
z-index:-1;
}
.submenu.myclass:after {
opacity:1;
}
.submenu ul {
list-style:none;
}
.submenu a {
color:white;
display:block;
}