jQuery悬停-保持弹出窗口打开 [英] Jquery hover - keep popup open

问题描述

好吧，我正在尝试制作一个按钮，当用户将鼠标悬停在该按钮上时，将显示一个包含文本的容器.而且我想知道是否可以将弹出的容器悬停在其上而保持打开状态.

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.

它类似于此问题:

但是，该线程上的答案对我没有帮助，因为它不能解决问题.

However the answer on that thread does not help me, as it does not solve the issue.

我的代码:

HTML:

<a href="#contact">
    <div class="button">
       <div class="button-text contactme">
            Contact me
        </div>
    </div>
</a>
<div class="emailcontainer">
    [e-mail]
</div>

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')
    });  
});

推荐答案

尝试此

将您的jQuery代码更新为:

Update your jQuery code as:

$(document).ready(function(){

$(".button-text.contactme, .emailcontainer").hover(function() {
    $('.emailcontainer').show('slow')
},function() {
        setTimeout(function() {
        if(!($('.emailcontainer:hover').length > 0))
            $('.emailcontainer').hide('slow');
        }, 300);
    });  
});

希望得到帮助！

这篇关于jQuery悬停-保持弹出窗口打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！