悬停时jQuery交换z-index [英] jQuery swap z-index on hover
问题描述
我有一个了解更多"按钮，当用户将鼠标悬停在该按钮上时，会在包含文本块的按钮上方显示一个更多信息框".我无法让它正常工作，因为更多信息框似乎干扰了悬停功能.我上传了一个我想要实现的示例:http://recoverstudio.com/hover_zindex/
I have a "Learn More" button that when the user hovers over, will display a "more info box" over top of the button that contains a block of text. I am having trouble getting this to work correctly as the more info box seems to be interfering with the hover function. I uploaded an example of what I'm trying to achieve: http://recoverstudio.com/hover_zindex/
css:
#container { 边距:30px 0 0 0;}
.more_info { 背景:#ccc;边距:0 自动；填充:10px 20px；位置:相对；顶部:-38px；宽度:355px；z-index:0；}
.more_info p { 颜色:#fff;字体大小:12px；行高:1.3；边距:0；}
.learn_more_btn { 背景:#333;颜色:#fff;显示:块；边距:0 自动；填充:10px 0；位置:相对；文本对齐:居中；文字装饰:无；宽度:100px；z-index: 10;}
jquery:
$('.more_info').css({'opacity' : 0});
$('.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});
});
推荐答案
你需要做的是将退出悬停功能设置为弹出，而不是另一个.否则你会陷入那个循环，出现弹出窗口会触发退出，然后触发进入......等等.
What you need to do is set the exit hover function to be for the pop up, not the other one. Otherwise you get caught in that cycle where having the pop up appear triggers the exit, and then that triggers the enter... etc.
这里有一个完整的页面作为示例.我在处理它时已经更改了一些内容(例如，将 more_info 更改为 ID，并将 animate 替换为fadeIn 和fadeOut，并且正在添加/删除一个类而不是使用 jQuery 的 css 函数).当然，这些可以改回来.
Here's a complete page as an example. I've changed a few things as I was working on it (more_info to an ID, for instance, and replaced animate with fadeIn and fadeOut, and am adding/removing a class instead of using jQuery's css function). Those could be changed back, of course.
我对此进行了测试，它在 FF4 和 Chrome 中按预期工作.
I tested this and it works as expected in FF4 and Chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hover Snaddle</title>
<style type="text/css">
* { margin: 0; padding: 0; outline: none; }
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, fieldset, textarea, th, td { border: 0; margin: 0; padding: 0; outline: none; vertical-align: baseline; }
body { background: #fff; color: #000; font: normal 12px/1.5 Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#container { margin: 30px 0 0 0; }
.hovery{z-index:20!important;}
#more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -38px; width: 355px; z-index: 0; display:none;}
#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;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.more_info').css({'opacity' : 0});
$('.learn_more_btn').mouseenter(function(){
console.log("enter: "+$('#more_info').css('z-index'));
$('#more_info').addClass('hovery').fadeIn();
});
$('#more_info').mouseleave(function(){
console.log("Exit: "+$('#more_info').css('z-index'));
$('#more_info').removeClass('hovery').fadeOut();
});
});
</script>
</head>
<body>
<div id="container">
<a href="#" class="learn_more_btn">Learn More</a>
<div id="more_info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>
这篇关于悬停时jQuery交换z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
