Question

当我与popover建立链接时遇到了问题。当鼠标脱离链接但悬停在popover我希望保持popover。如果鼠标没有链接图标而不是弹出区域，则隐藏弹出窗口。

http://awesomescreenshot.com/0d92gzl955当它出现时会显示popover为跟随图片。http://awesomescreenshot.com/06e2gzlbdc

我该怎么办？现在我正在使用jQuery .hover（function（）{}，function（）}）;但无法解决。请帮忙

由于

Answer 1

某些代码比那些屏幕截图更有用，但您应该将链接和弹出窗口放在一个公共容器中，并在该容器上设置悬停侦听器。这样，如果您正在悬停链接或悬停弹出框，您也将悬停在容器元素上，并且您的弹出窗口将保持打开状态。

Answer 2

图标和弹出项目都应该包含一个通用TAG以获得更好的性能。就我而言，应用了LI标签。在jQuery中，这个父LI标签用于编写悬停事件。

HTML：

<ul class="iconsWrap">
<li class="iconItem">
    <a href="#"><i class="glyphicon glyphicon-globe"></i></a>
    <div class="popover bottom">
        <div class="arrow"></div>
        <div class="popover-content">
            <ul>
                <li><a href="#">Español</a></li>
                <li><a href="#">Japan</a></li>
                <li><a href="#">Korea</a></li>
                <li><a href="#">Pakistan</a></li>
            </ul>
        </div>
    </div>
</li>
<li class="iconItem">
    <a href="#"><i class="glyphicon glyphicon-globe"></i></a>
    <div class="popover bottom">
        <div class="arrow"></div>
        <div class="popover-content">
            <ul>
                <li><a href="#">Español</a></li>
                <li><a href="#">Japan</a></li>
                <li><a href="#">Korea</a></li>
                <li><a href="#">Pakistan</a></li>
            </ul>
        </div>
    </div>
</li>
<li class="iconItem">
    <a href="#"><i class="glyphicon glyphicon-globe"></i></a>
    <div class="popover bottom">
        <div class="arrow"></div>
        <div class="popover-content">
            <ul>
                <li><a href="#">Español</a></li>
                <li><a href="#">Japan</a></li>
                <li><a href="#">Korea</a></li>
                <li><a href="#">Pakistan</a></li>
            </ul>
        </div>
    </div>
</li>
</ul>

CSS：

body{
    margin: 40px 0 0 100px;
}
i{
    font-size: 26px;
}
.popover{
    display:block;
    top: 25px;
    left: -28px;
    position:absolute;
    display:none;
}
ul{
    margin:0;
    padding: 0;
    list-style: none;
}

ul.iconsWrap{}
li.iconItem{display:inline-block; margin-right:10px; position:relative}

jQuery的：

jQuery(document).ready(function($){
    $('li.iconItem').hover(
        function(){
            $('.popover',this).css({display: 'block'});
        },
        function(){
            $('.popover',this).css({display: 'none'});
        }
    );
});

请参阅此LIVE：jsfiddle.net/mamun_reza/a9xND/2/。如果您对此问题有任何疑问，请与我们联系：）

如何在链接上悬停并弹出自身时显示弹出菜单

2 个答案: