Question

I’m trying to get the code below to execute an event that triggers once a user has hovered over a link. The event I’d like to be triggered is for a DIV to appear once the user had hovered over the link and disappear once the user has moved the mouse away from the menu. (it’s supposed to for sub menus on a top level navigation.) However the ‘mouseover’ event gets fired, but not the ‘mouseout’ event. It’s been confusing me for a little bit.

function menuBehavior() {
  var subMenu = $$('.has_menu').getChildren('A')[0];

  window.addEvent('domready', 
      function() {
          subMenu.addEvent('mouseover', 
                function()  {
                    this.getSiblings('.menu-level_2').addEvent('mouseover', 
                        function(e) {
                            this.getSiblings('.menu-level_2').setStyle('opacity', 1);
                            e.stop();
                    });

                    this.getSiblings('.menu-level_2').addEvent('mouseout', 
                        function(e) {
                            this.getSiblings('.menu-level_2').setStyle('opacity', 0);
                            e.stop();
                        });
                });
    });
} // end of FUNCTION menuBehavior

also here’s the HTML for the menu layout.

<li class="menu-option has_menu">
    <a href="#option1"><span class="menu-arrow">Menu Option #1</span></a>
        <div class="menu-level_2">
            <ul class="level_2">
                <li class="more">
                    <a href="#sub_menu1"><span class="menu_level_2-more">Sub Menu Option #1</span></a>
                    <div class="bumper">
                        <div class="menu-level_3">
                            <ul class="level_3">
                                <li>
                                    <a href="#sub_menu1"><span class="menu_level_3">Sub Menu Option #1</span></a>
                                </li>
                                <li class="option-spcr">&nbsp;</li>
                                <li>
                                    <a href="#sub_menu1" class="menu_level_3"><span>Sub Menu Option #2</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #2</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #3</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #4</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                            <li>
                                <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #5</span></a>
                </li>
            </ul>
        </div>
    </li>

Thanks in advance for any thoughts or insights in how to fix this code.

Answer 1

OK first of all this can all be done with CSS however you will need plenty of markup changes.

If you insist on the path you are on the mootools code will look more like:

window.addEvent('domready', function(){
    $$('.has_menu > a').each(function(el){
        el.addEvents({
            'mouseover': function(e) {
                el.getFirst('div').setStyle('opacity', 1);
            },
            'mouseout': function(e) {
                el.getFirst('div').setStyle('opacity', 0);
            }
        });
    })
});

However based on your HTML mark up this will not work as you will be mousing out of the A tag as soon as you enter the DIV

You would be better off removing the div and attaching the event to the LI tag and have the UL tag appear apon MOUSEENTER and hide the UL tag on MOUSELEAVE

I hope that gets you pointed in the right direction