Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hoverIntent triggers 'out' function on select element

The code that follows is used for showing and hiding Mega Dropdowns. If you mouse-over a link with the class of 'dropDown', it's child '.dropPanel' shows. As long as your mouse is over either the link or the drop panel, the drop panel remains shown. Move the cursor anywhere but the link or the panel, and the panel is hidden. Pretty basic stuff.

In a few of these Mega Dropdowns there are forms that contain select elements. In Firefox, all is well. In IE (8 specifically, have not tested any other versions), if you mouse-over a select element in the drop panel, hoverIntent fires the 'out' function of dropPanelOff() and the drop panel hides.

How do I prevent this?

        // Apply Hover Intent to Menu Panels
        $(".dropDown").hoverIntent({
            sensitivity: 10, 
            interval: 150, 
            over: dropPanelOn, 
            timeout: 150, 
            out: dropPanelOff
        });

            // Menu Over function call
            function dropPanelOn() {
                $('a[rel="dropLink"]', this).addClass('hover');
                $('.dropPanel', this).slideDown('fast');
            }

            // Menu Out function call
            function dropPanelOff() {
                obj = this;
                $('.dropPanel', this).slideUp(100, function(){
                    $('a[rel="dropLink"]', obj).removeClass('hover');
                    $('.dropLink span', obj).removeClass('hover');
                });
            }
like image 923
S16 Avatar asked Jan 20 '10 20:01

S16


1 Answers

Try adding this to your code:

$(".dropDown select").mouseout(function(e) {
        e.stopPropagation();
});
like image 104
Reg Avatar answered Sep 23 '22 09:09

Reg