hover event problem with jquery

Question

hi all im building a menu and im trying to put an hover effect on each menu item but... when i hover everything is working great and i get the html i want and the menu item has a backgruond image.

but the unhover effect dosnt fire most of the times. i found out that if i move my mouse horziantly across the ul menu it works fine. but if my mouse does a vertical move across the li item it dosnt fire. my code is this:

 $("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem);
 function ChangeToHoverMenuItem()
 {
    var currLi = $(this);
    lastLi = currLi;
    var currMenuItemText = currLi.find("a").text();
    currLi.html("");

    currLi.append("<div style='float:right;'><div class='right_item_hov'></div>" +
                "<a class='item_menu_hov'>" +
                currMenuItemText +
                "</a>" +
                "<div class='left_item_hov'></div></div>");
 }

 function ChangeBackMenuItem ()
 {
     var currLi = $(this);
     var currMenuItemText = currLi.find("a").text();

     currLi.html("");
     currLi.append("<a>" + currMenuItemText + "</a>");

 }

     <div class="menu_middle">
    <ul class="menu">
        <li>
            <a>
                main
            </a>
        </li>
        <li>
            <a>
                gallery
            </a>
        </li>
        <li>
            <a>
                event
            </a>
        </li>
        <li>                
            <a>
               about
            </a>
        </li>
        <li>
            <a>
                contact
            </a>
        </li>
    </ul>
</div>

thank you

Answer 1

Try giving a boundary to the li (using css 'border' property) and then add a console.log(firebug) statement in the beginning of 'ChangeBackMenuItem' to see if the function is called each time you un-hover.

Answer 2

The strange thing is, that there are two mouseenter() events on sibling elements without a mouseleave() event in between.

One idea is to register the mouseenter() and mouseleave() event instead of using hover(). hover() should do the same, but how knows. If this works, the problem lies in the implementation of hover() but I don't think so.

$("ul.menu li")
  .mouseenter(ChangeToHoverMenuItem)
  .mouseleave(ChangeBackMenuItem);

Another idea is to ensure that the mouseleave() code was executed. In your "doHover" handler you can check if there is anhoveredItem. If so, you can call the ChangeBackMenuItem function with the still hovered item as this. To ensure that the "unhover" handler is called when you leave your ul, you need a mouseleave event on this, that does the same. This solution relies on a working mouseleave on the ul element.

$(function() {

 var hoveredItem = null;

 function ChangeToHoverMenuItem()
 {
    if (hoveredItem) {
       ChangeBackMenuItem.call(hoveredItem);
    }
    hoveredItem = this;

    var currLi = $(this);
    lastLi = currLi;
    var currMenuItemText = currLi.find("a").text();
    currLi.html("");

    currLi.append("" +
                "" +
                currMenuItemText +
                "" +
                "");
 }

 function ChangeBackMenuItem ()
 {
     var currLi = $(this);
     var currMenuItemText = currLi.find("a").text();

     currLi.html("");
     currLi.append("" + currMenuItemText + "");
     hoveredItem = null;

 }

 $("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem);
 $("ul.menu").mouseleave(function() {
   if (hoveredItem) {
     ChangeBackMenuItem.call(hoveredItem);
     hoveredItem = null;
   }
 });
});