I am currently trying to achieve a specific effect by keeping the green border visible for the active menu item when hovering over the dropdown. The issue I am encountering is that the border disappears when moving the cursor over the dropdown, which is not the desired behavior.
https://i.sstatic.net/S7rJA.gif
Below is the current JavaScript code responsible for handling the border animation:
var menu = $('.indication'),
indicator = $('<span class="indicator"></span>');
menu.append(indicator);
menu.find('.has-dropdown, .login-status').mouseenter(function() {
position_indicator($(this));
});
$('.navigation-wrapper .navi, .dropdown-wrapper').mouseleave(function() {
indicator.stop().animate({
left: 0,
width: 0
}, 150, function() {
// Animation complete
});
});
function position_indicator(el) {
var left = el.position().left + 20;
var width = el.width();
indicator.stop().animate({
left: left,
width: width
}, 150, function() {
// Animation complete
});
}
The above code functions correctly for the .navigation-wrapper .navi element and the border disappears as expected on mouseleave. However, my goal is to maintain the border when hovering over the .dropdown-wrapper as well. I have attempted following a similar approach described in How to detect mouseleave() on two elements at once?, but have been unsuccessful in implementing it in my case.
For reference, here is the relevant HTML structure:
<div class="navi-wrapper">
<nav class="row navigation">
<div class="navigation-wrapper indication">
<ul class="navi">
(Menu items with links)
</ul>
</div>
</nav>
</div>
<div class="dropdown-wrapper">
<ul id="1" class="dropdown">
...
</ul>
<ul id="2" class="dropdown">
...
</ul>
<ul id="3" class="dropdown">
...
</ul>
<ul id="4" class="dropdown">
...
</ul>
</div>