jQuery Hover和mouseenter / mouseleave无法正常工作

时间:2014-01-18 17:33:33

标签: jquery

简单查询:

在下面的短代码中使用jsfiddle,每次都不会触发mouseleave。我试着悬停,但我面临同样的问题。

有什么建议吗?

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

CODE

             
  • GAME
  •         
  • INTRO
  •         
  • TUTORIAL
  •     
    <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>
    

    1 个答案:

    答案 0 :(得分:3)

    试试这个

    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