jQuery将鼠标悬停在z-index上 [英] jQuery swap z-index on hover
问题描述
我有一个了解更多按钮，当用户悬停时，会在包含文本块的按钮顶部显示更多信息框。我无法正常工作，因为更多的信息框似乎干扰了悬停功能。我上传了一个我想要实现的例子： http://recoverstudio.com/hover_zindex/
#container {margin：30px 0 0 0; }
.more_info {background：#ccc;保证金：0汽车; padding：10px 20px;位置：相对;顶部：-38px;宽度：355px; z-index：0; }
.more_info p {color：#fff; font-size：12px;行高：1.3;保证金：0; }
.learn_more_btn {background：＃333;颜色：#fff;显示：块;保证金：0汽车;填充：10px 0;位置：相对; text-align：center;文字修饰：无;宽度：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' ：{}};
}，function（）{
$（'。more_info'）。stop（）。animate（{'opacity'：0}，300）.css（{'z- index'：0}）;
}）;
你需要做的是将退出悬停功能设置为弹出，而不是另一个。否则，你会陷入那个循环中出现弹出窗口触发退出，然后触发enter ...等等。
这里是一个完整的页面。例如，我正在修改一些内容（比如more_info为一个ID，并用fadeIn和fadeOut代替了animate，并且正在添加/删除一个类，而不是使用jQuery的css函数）。当然，这些可以改回来。
我测试了这个，它在FF4和Chrome中按预期工作。
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> Hover Snaddle< / title>
< style type =text / css>
* {margin：0;填充：0;概要：无; }
body，html，div，blockquote，img，label，p，h1，h2，h3，h4，h5，h6，pre，ul，ol，
li，dl，dt，dd， ，fieldset，textarea，th，td {border：0;保证金：0;填充：0;概要：无; vertical-align：baseline; }
body {background：#fff;颜色：＃000; font：normal 12px / 1.5 Helvetica，Arial，sans-serif;保证金：0;填充：0; }
#container {margin：30px 0 0 0; }
.hovery {z-index：20！important;}
#more_info {background：#ccc;保证金：0汽车; padding：10px 20px;位置：相对;顶部：-38px;宽度：355px; z-index：0; display：none;}
#more_info p {color：#fff; font-size：12px;行高：1.3;保证金：0; }
.learn_more_btn {background：＃333;颜色：#fff;显示：块;保证金：0汽车;填充：10px 0;位置：相对; text-align：center;文字修饰：无;宽度：100px; z-index：10;}
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js><<< ; /脚本>
< script type =text / javascript>
$（document）.ready（function（）{
$ b $（'。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>了解详情< / a>
< div id =more_info>
Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。< / p>
< / div>
< / div>
< / body>
< / html>
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 { 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>
这篇关于jQuery将鼠标悬停在z-index上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
