jQuery swap z-index on hover
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 thi开发者_开发技巧s 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 { 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});
});
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.
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.
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>
The problem is when the z-index of .more-info is bigger than .learn_more_btn, the hover changes state again, and it keeps repeating.
Why not put the .more_info on top of the button? Here's an example from me using fadeIn and fadeOut instead of .animate
http://jsfiddle.net/FUaVw/
加载中,请稍侯......
精彩评论