JQuery Hover и MouseEnter/MouseLeave не работает

Question

Простой запрос:

Iin короткий код ниже с jsfiddle, то MouseLeave не получает срабатывает каждый раз. Я попытался с зависанием, но я столкнулся с той же проблемой.

Любые предложения?

JSFIDDLE: http://jsfiddle.net/sandeepy02/wM8Q3/3/

КОД

GAME

INTRO

Учебник

<script> 
jQuery(document).ready(function(){ 
    mainMenuLong=[]; 
    mainMenuShort=[]; 
mainMenuLong[0] = '<a href="#">Start playing the Game</a>'; 
mainMenuLong[1] = '<a href="#">Learn how to play Game</a>'; 
mainMenuLong[2] = '<a href="#">Learn to trade</a>'; 
mainMenuShort[0] = '<a href="#">GAME</a>'; 
mainMenuShort[1] = '<a href="#">INTRO</a>'; 
mainMenuShort[2] = '<a href="#">TUTORIAL</a>'; 
}); 
jQuery("#navSY li").mouseenter(
    function() { 
    jQuery(this).html(mainMenuLong[jQuery(this).parent().children().index(this)]); 
    }); 
jQuery("#navSY li").mouseleave(function() { 
    jQuery(this).html(mainMenuShort[jQuery(this).parent().children().index(this)]); 
    });/* 
jQuery("#navSY li.fade").hover(function() { 
    jQuery(this).fadeOut(1000); 
    jQuery(this).fadeIn(1500); 
});*/ 
</script> 

Answer 1

Попробуйте

jQuery(document).ready(function() { 
    mainMenuLong = []; 
    mainMenuShort = []; 
    mainMenuLong[0] = 'Start playing the Game'; 
    mainMenuLong[1] = 'Learn how to play Game'; 
    mainMenuLong[2] = 'Learn to trade'; 
    mainMenuShort[0] = 'GAME'; 
    mainMenuShort[1] = 'INTRO'; 
    mainMenuShort[2] = 'TUTORIAL'; 

    $("#navSY li a").hover(function() { 
     $(this).html(mainMenuLong[$(this).parent().index()]); 
    }, function() { 
     $(this).html(mainMenuShort[$(this).parent().index()]); 
    }); 
}); 

DEMO

---

Я предлагаю вам хранить текст с якорем тег с использованием атрибутов

<div style="margin-right:10px;"> 
    <ul id="navSY" class="introMenuSY"> 
     <li><a href="http://42charts.com/?page_id=828" data-enter-text="Start playing the Game" data-leave-text="GAME">GAME</a> 

     </li> 
     <li><a href="http://42charts.com/?page_id=1716" data-enter-text="Learn how to play Game" data-leave-text="INTRO">INTRO</a> 

     </li> 
     <li><a href="http://42charts.com/?page_id=1637" data-enter-text="Learn to trade" data-leave-text="TUTORIAL">TUTORIAL</a> 

     </li> 
    </ul> 
</div> 

JS

jQuery(document).ready(function() { 
    $("#navSY li a").hover(function() { 
     $(this).html($(this).data('enter-text')); 
    }, function() { 
     $(this).html($(this).data('leave-text')); 
    }); 
}); 

DEMO 2