Question

I’m trying to implement a simple interaction: when the mouse cursor hovers a specific <li> element, a hidden element displays atop the hovered element. The hidden element is just a small button bar that appears so the user can interact further. I have a <ul> element with a bunch of <li> elements that are styled using Zurb’s Foundation so that the items appear as a block grid–hence the nested <ul>‘s.

The hover handlers seem to work just fine as the debug logs are written to the console perfectly no matter how fast I move the cursor, or where it lands. However, the toggling of the .show() and .hide() are never consistent. In some cases when the cursor enters the <li> item in question the button bar shows up, in other cases, it does not. Sometimes when the cursor exits the <li> element the button bar never hides. What is most puzzling is that the debug logs are called as expected, but the other lines of code in the handler are not. Does anybody know a workaround? I’ve tried hoverIntent, but the results persist. I thought that maybe because the <li>‘s are arranged horizontally that this might cause this problem, but am not sure. How can I ensure consistent behavior with the .hover() method?

Here is a jsfiddle of the problem:
http://jsfiddle.net/DdWrD/6/

I build the markup from some PHP:

<div id="grids" class="twelve columns">

<!-- begin "all templates" category tab -->
<li class="active" id="allTab">
    <ul class="block-grid three-up">
        <?php

        foreach ($templates as $t) {

            echo '<li class="catItem" id="'.$t['title'].'">';
            echo '  <ul class="button-group radius"><li><a class="button small" href="#">Preview</a><li><a class="button small" href="#">Personalize</a></li></ul>';
            echo '  <img src="../images/posters/hires/'.$t['poster'].'">';
            echo '  <h6>'.$t['section'].' &nbsp;>&nbsp; '.$t['category'].'</h6>';
            echo '  <h5>'.$t['title'].'</h5>';
            echo '</li>';

            }

        ?>
    </ul>
</li>
<!-- end "all templates" tab -->

</div>

In the SCSS style for the button bar that I want to appear on a hover

#grids{
>li{
    >ul{
        >li{
            >ul{
                padding-bottom: 0px;
                margin-bottom: 0px;
                width: 150px;
                position: absolute;
                display: none;
                >li{
                    padding: 0px;
                    width: 50%;
                    border-right: 0px none;
                }
            }
            border-top: 1px dotted $light-dotted-border;
            border-left: none;
            border-right: 1px dotted $light-dotted-border;
            border-bottom: none;
            padding: 10px;
            cursor: pointer;
         }
      }
   }
}

Here is the Javascript that is driving the hover event:

function initCatalog()
{
$('.catItem').hover(hoverCatItem, exitCatItem);
}

function hoverCatItem(e)
{
    debug.log("[CATALOG]    :   Hovering over catalog item.");
    $(e.target).children('ul').show();
}

function exitCatItem(e)
{
    debug.log("[CATALOG]    :   Exit catalog item.");
    $(e.target).children('ul').hide();
}

Answer 1

Instead of using e.target, use this

function hoverCatItem(e)
{

    var bar = $(this).children('.button-group');
    bar.stop(true, true).show();
}


function exitCatItem(e)
{

    var bar = $(this).children('.button-group');
    bar.stop(true, true).hide();
}