Question

I’m having a problem similar to this one Drop Down Box Keeps flickering – JQuery and CSS with a drop down menu flickering when I move the mouse over it, except that it doesn’t seem to happen in firefox. I put an alert in the mouseout event I have on it and found out that every time I moved from one <li> to another inside the menu the alert was triggered. Here is the important parts of the html code behind it.

<!--// HEADER BAR //-->
<div id="header">
<!--// NAVIGATION LINKS //-->
<div id="navigation">
    <!--// AUTHENTICATED //-->
    <div id="options" class="authenticated">
        <ul>
        <li><a href="javascript: toggleAccount()" class="account" title="Account">/</a></li>
        </ul>
    </div>
    <!--// ACCOUNT MENU //-->
    <div id="account_container" style="display: none;" onmouseout="hideAccount();">
        <div id="account">
            <ul>
            <li>Options...</li>
            </ul>
        </div>
    </div>
</div>
</div>

As you can see, the “account_container” div is the drop down menu. It first appears when the user clicks on the account li under authenticated and disappears either when the user clicks on the li again or mouses out. The navigation div has it’s height set to 40px in the css, so I thought it might be a positioning problem like in the linked question, but setting the height to auto didn’t fix it, and I can’t take the account container out of the navigation bar because that will mess up it’s positioning. Why is the browser detecting the shift from one menu item to another as a mouseout event and how can I prevent it?

EDIT:

Could I do something like Andy E’s answer to this question? Could I change onmouseout="hideAccount()" to onmouseout="hideAccount.call(this)" and detect if the mouse is over a child element of the dropdown inside the hideAccount function? If so, how would I go about that? For reference, here’s the hideAccount function:

function hideAccount(){
//alert("mouse out!");
$(".account_container").hide();
}

Answer 1

Solved it by changing the hideAccount function to this:

function hideAccount(event){
var to = event.relatedTarget || event.toElement;
if(this.contains(to)){
    return;
}
else{
    $(this).hide();
}
}

The problem was that every browser except Firefox was detecting the move from the account_container to any of it’s children as a mouseout. Technically, when the mouse is over one of the list elements inside the container, it is no longer over the container itself for some reason. I guess firefox was the only browser to check if the mouse had moved into a child element before hiding. What fixed it was putting in javascript to check to see if I was moving to a child element before trying to hide.