Ian Mckay Ian Mckay - 1 year ago 74
jQuery Question

Which DOM events are triggered on mouse hover and can they be emulated?

On the site http://themeforest.net/ there is a category dropdown that activates as the mouse hovers over the menu item (e.g. HTML, Marketing, CMS). However, I cannot seem to break on any DOM event that is attached to it (checking using Firefox debugger). The expected event listeners were something like mouseover on the <li>.

What I'd like to know is what events are attached to it (or how is this animation being triggered otherwise), how you found that information and whether these events can be emulated with $(el).trigger() or el.createEvent()

Thanks in advance.

Answer Source

It doesn't need to be a javascript which shows the submenu, it can also be done in plain css with the pseudo class ":hover".

I guess this is how it works on this page, since i can not see any changes in the DOM (like added classes, changed inline style). It can be done like this:

div ul {
    display: none;

div:hover ul {
    display: block;

With this css, ul's within div's are displayed once the div is hovered.

Anyways, regarding your question: "hover" does no really trigger a own event (as far as i know), it is more a combination of "mouseenter" and "mouseleave".

Hope this helps.

Edit: I checked the css on the page which proofes my assumption, there is the following css-rule which applies to the menu-point-li:

    display: block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download