javascript Jquery 悬停 - 保持弹出窗口打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30084561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery hover - keep popup open
提问by
Well, I am trying to make a button which, when a user hovers on it, will display a container which has text in it. And I am wondering if it is possible to have the container which pops up stays open if you hover down to it.
好吧，我正在尝试制作一个按钮，当用户将鼠标悬停在该按钮上时，它将显示一个包含文本的容器。我想知道如果您将鼠标悬停在弹出的容器上是否有可能保持打开状态。
It is similar to this question:
这类似于这个问题：
However the answer on that thread does not help me, as it does not solve the issue.
但是，该线程上的答案对我没有帮助，因为它没有解决问题。
My code:
我的代码：
HTML:
HTML：
<a href="#contact">
<div class="button">
<div class="button-text contactme">
Contact me
</div>
</div>
</a>
<div class="emailcontainer">
[email protected]
</div>
CSS:
CSS：
.emailcontainer {
display:none;
color:#fff;
border:solid 1px #fff;
padding:10px;
padding-left:50px;
padding-right:50px
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px
}
.button-text.contactme {
font-weight:20px
}
JQuery:
查询：
$(document).ready(function(){
$(".button-text.contactme").hover(function() {
$('.emailcontainer').show('slow')
},function() {
$('.emailcontainer').hide('slow')
});
});
采纳答案by gamini2006
try this
试试这个
Update your jQuery code as:
将您的 jQuery 代码更新为：
$(document).ready(function(){
$(".button-text.contactme, .emailcontainer").hover(function() {
$('.emailcontainer').show('slow')
},function() {
setTimeout(function() {
if(!($('.emailcontainer:hover').length > 0))
$('.emailcontainer').hide('slow');
}, 300);
});
});
Hope this help!!!
希望这有帮助！！！
回答by Raza Hussain
Why you are trying to reinvent the wheel, have a look Qtip with verity of feature:
为什么您要重新发明轮子，请查看具有真实功能的 Qtip：
回答by The Guest
I your emailcontainer class in CSS, remove the color:#fff;, because it is white. Or you can change the color which is not white
see fiddle here: https://jsfiddle.net/tn5wy5dk/1/
我在 CSS 中使用您的 emailcontainer 类，删除color:#fff;, 因为它是白色的。或者您可以更改非白色的颜色，请参见此处的小提琴：https: //jsfiddle.net/tn5wy5dk/1/
回答by ShazebAli
you may use mouseover and mouseout https://api.jquery.com/mouseover/If you do not have a cross/close button on the popup then you can use mouseout for hiding the popup
您可以使用 mouseover 和 mouseout https://api.jquery.com/mouseover/如果弹出窗口上没有交叉/关闭按钮，则可以使用 mouseout 来隐藏弹出窗口
回答by Samurai
You can move the
.emailcontainerinside your button div so it'll share the hover even nothing extra needed:<div class="button-text contactme"> Contact me <div class="emailcontainer">[email protected]</div> </div>If you want it to be popup, you need to set the container to have
position: relativeand the popup to haveposition: absolute;:.button-text.contactme { position: relative; } .emailcontainer { position: absolute; top: 40px; left: 20px; /* the rest of styles */ }I don't think
50pxis a proper value forfont-weight. You either meant to usefont-size: 50px;or something likefont-weight: bold;.
您可以移动
.emailcontainer按钮 div的内部，这样即使不需要额外的东西，它也会共享悬停：<div class="button-text contactme"> Contact me <div class="emailcontainer">[email protected]</div> </div>如果你想让它弹出，你需要设置容器有
position: relative和弹出有position: absolute;：.button-text.contactme { position: relative; } .emailcontainer { position: absolute; top: 40px; left: 20px; /* the rest of styles */ }我不认为
50px是一个合适的值font-weight。您打算使用font-size: 50px;或类似的东西font-weight: bold;。
回答by Ritesh Karwa
HTML CODE
HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app2.js"></script>
<style>
.emailcontainer {
display:none;
color:blue;
border:solid 1px black;
padding:10px;
padding-left:50px;
padding-right:50px
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px
}
.button-text.contactme {
font-weight:20px
}
</style>
</head>
<body>
<a href="#contact">
<div class="button">
<div class="button-text contactme">
Contact me
</div>
</div>
</a>
<br/>
<div id="emailcontainerdiv" class="emailcontainer">
[email protected]
</div>
</body>
</html>
Javascript
Javascript
$(document).ready(function(){
$(".button-text.contactme").hover(function() {
$('#emailcontainerdiv').show();
},function() {
$('#emailcontainerdiv').show();
});
});
