hover événement problème avec jquery

Question

salut tous im construire un menu et im essayant de mettre un effet de survol sur chaque élément de menu mais ... quand je hover tout fonctionne très bien et je reçois le html je veux et l'élément de menu a une image de backgruond.

mais la plupart du temps, l'effet de déconnexion ne se déclenche pas. J'ai découvert que si je déplace ma souris horziantly à travers le menu ul ça fonctionne bien. mais si ma souris fait un mouvement vertical à travers l'élément li il ne se déclenche pas. mon code est le suivant:

$("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> 

merci

Answer 1

La chose étrange est, qu'il ya deux événements mouseenter() sur des éléments frères sans un événement mouseleave() entre. Une idée est d'enregistrer l'événement mouseenter() et mouseleave() au lieu d'utiliser hover(). hover() devrait faire la même chose, mais comment sait. Si cela fonctionne, le problème réside dans la mise en œuvre de hover() mais je ne le pense pas.

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

Une autre idée consiste à s'assurer que le code mouseleave() a été exécuté. Dans votre gestionnaire "doHover", vous pouvez vérifier s'il y a un hoveredItem. Si c'est le cas, vous pouvez appeler la fonction ChangeBackMenuItem avec l'élément encore en suspens comme this. Pour s'assurer que le gestionnaire "unhover" est appelé lorsque vous quittez votre ul, vous avez besoin d'un événement mouseleave sur ce, qui fait la même chose. Cette solution repose sur un mouseleave de travail sur l'élément ul.

$(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; 
    } 
}); 
}); 

Answer 2

Essayez déclaration donnant une limite à la li (en utilisant la propriété css 'border'), puis ajoutez un console.log (firebug) au début de ' ChangeBackMenuItem 'pour voir si la fonction est appelée chaque fois que vous décochez.