Question

简单查询：

在下面的短代码中使用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>

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

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

1 个答案: