Solution 1 :

As you use mouseover event, you need to use mouseout event to reset the default values.

Problem :

I have a navbar with an item that when a user hovers on it, a panel will open, like a dropdown menu. And when user clicks on an item on the panel, a small popup will open near it for information, and user can click things on that popup (such as links, button,…).

My problem is when the user moves the pointer to the popup, the panel will disappear because the popup is not in the same element with a navbar item, so it lost the hover effect.

Is there any solution to keep hovering item while mouse moved to the popup, and still keep the DOM structure (popup separates with navbar items)


Comment posted by Ravichandran

It’s possible only with javascript toggling a hover class

Comment posted by Rene van der Lende

Elements need a ‘click’ to retain focus.

Comment posted by Sunil

Create a class (eg: active {hover style}) and add it to the menu when clicked to open the popup, remove when the popup is closed.

Comment posted by thanhdx

Thanks, I’m looking for a solution without using another class like