简单查询:
在下面的短代码中使用jsfiddle,每次都不会触发mouseleave。我试着悬停,但我面临同样的问题。
有什么建议吗?
JSFIDDLE:http://jsfiddle.net/sandeepy02/wM8Q3/3/
CODE
<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>
答案 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()]);
});
});
我建议您使用属性
存储带有锚标记的文本<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'));
});
});