Hey guys, I'm encountering an issue while creating mega menu tabs. Here's what I'm doing: I have tabs that trigger a 'mouseenter' event in the background when hovered over. This event adds an 'active' CSS class to both the tabs and the tab panes. Everything seems to be working fine up until this point. However, on triggering the 'mouseleave' event on the tabs, users are unable to move their mouse towards the tab pane. I am looking for a way to hide the tab pane when the mouse position moves out of the boundary defined by the tabs and tab pane. Can someone verify if my events are set up correctly?
$(document).ready(function () {
// Select all tabs nav li items.
var navs = $('.megamenu-tabs').children('.megamenu-tabs-nav').children('li');
// div panes array which is all tabs pane that will show on hover
var panes = $('.megamenu-tabs').children('.megamenu-tabs-pane');
navs.on('mouseenter', function (e) {
e.stopPropagation();
e.preventDefault();
// remove active class from all tabs
navs.removeClass('active');
// add class active on current tab
$(this).addClass('active');
// remove active class from all tabs pane
panes.hide(0).removeClass('active');
// add class on current tab pane
$(panes[$(this).index()]).show(0).addClass('active');
});
navs.on('mouseleave', function (e) {
e.stopPropagation();
e.preventDefault();
// remove active class from all tabs
navs.removeClass('active');
// remove active class from all tabs pane
panes.hide(0).removeClass('active');
});
}); * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
}
.container {
width: 80%;
}
.megamenu-tabs {
width: 100%;
float: left;
display: block;
margin: 30px;
}
.megamenu-tabs-nav {
width: 20%;
margin: 0;
padding: 0;
float: left;
list-style: none;
}
...
</body>