hover时jQuery交换z-index
我有一个“了解更多”按钮，当用户将鼠标hover在该按钮上时，将在包含一个文本块的按钮顶部显示“更多信息框”。 我无法正常工作，因为更多的信息框似乎干扰了hoverfunction。 我上传了一个我想要实现的例子： http ： //recoverstudio.com/hover_zindex/
CSS：
#container { margin: 30px 0 0 0; }
.more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -38px; width: 355px; z-index: 0; }
.more_info p { color: #fff; font-size: 12px; line-height: 1.3; margin: 0; }
.learn_more_btn { background: #333; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; text-align: center; text-decoration: none; width: 100px; z-index: 10;}
jQuery的：
$('.more_info').css({'opacity' : 0});
$('.learn_more_btn').hover(function(){ $('.more_info').stop().animate({'opacity': 1}, 300).css({'z-index' : 20}); },function(){ $('.more_info').stop().animate({'opacity': 0}, 300).css({'z-index' : 0}); });
您需要做的是将退出hoverfunction设置为弹出窗口，而不是另一个。 否则你会陷入那个出现弹出窗口触发退出的循环，然后触发输入……等等。
这是一个完整的页面作为示例。 我在处理它时已经改变了一些东西（例如，more_info到ID，用fadeIn和fadeOut替换了animate，并且添加/删除了一个类而不是使用jQuery的css函数）。 当然，那些可以改回来。
我测试了它，它在FF4和Chrome中按预期工作。
Hover Snaddle Learn More Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
问题是当.more-info的z-index大于.learn_more_btn时，hover会再次改变状态，并且它会不断重复。
为什么不把.more_info放在按钮的顶部？ 这是我使用fadeIn和fadeOut而不是.animate的例子