2014-01-18 80 views
0

簡單查詢:jQuery懸停和mouseenter/mouseleave無法正常工作

在使用jsfiddle下面的短代碼中,mouseleave不會每次都被觸發。我嘗試了懸停,但我面臨同樣的問題。

有什麼建議嗎?

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

CODE

  • 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> 
    

    回答

    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

    +0

    仍然存在mouseleave的問題。每次都不會觸發。但是感謝那些整潔的代碼。 – user1517108

    +0

    @ user1517108,我給你提供了不同的方法,那個更清潔 – Satpal

    +1

    希望我能給你更多的讚揚 - 你只是把我的草率代碼變成了一個簡單的代碼 - 甚至沒有我的要求 - 謝謝。 – user1517108