鼠标悬停/单击时弹出 Div 锚点答案

【问题标题】：Popup Div anchor at mouse hover/click鼠标悬停/单击时弹出 Div 锚点
【发布时间】：2012-11-07 05:04:31
【问题描述】：

我是 Web 编程的新手。

我想在 facebook 中实现类似的东西，当我们将鼠标悬停在链接上时，锚定在链接上的箭头浮动 div 将显示在其顶部。

你们是如何处理这类组件的？我找到的最近的库是http://gristmill.github.com/jquery-popbox/ 这有时在某些浏览器中不起作用。进一步搜索“Popbox”没有显示任何有用的结果。任何人都可以推荐任何类似的图书馆，比如我发布的链接吗？它可以使用 Jquery、Javascript、CSS、html 等。

谁能以最简单的方式向我展示如何在不使用库的情况下使用库而不是使用库。我只是想知道背后的粗略想法。大多数库都带有复杂的代码，初学者很难学习。

非常感谢。

【问题讨论】：

+1 表示想学习它：)

标签： javascript jquery html css web-applications

【解决方案1】：

查看此工作演示：http://jsfiddle.net/fedmich/Aapw6/

您需要在弹出框的顶部创建一个箭头图像并居中，然后通常移动弹出框以跟随目标锚点。

$('.hover').hover(function(){
        var popup_div = $('.popup_div');
        var obj = $(this);
        var offset = obj.offset();

        var new_top = offset.top + 30;

        var new_left = offset.left;

        new_left = new_left - ( popup_div.width() / 2);
        new_left = new_left + ( obj.width() / 2);

        popup_div.css('left', new_left + 'px');
        popup_div.css('top', new_top + 'px');

        popup_div.show();
    }
    , function (){
        //hovered away so hide popup
        $('.popup_div').hide();
    }
    );

CSS 代码应该是绝对位置

.popup_div{
    position:absolute;
    left:100px;
    top:100px;
    border:1px solid red;
    background-color:blue;
    width:150px;
    height:150px;
    background:url("http://i.imgur.com/zFWft.png") no-repeat scroll center 0 transparent;
    text-align:left;
}

您可以通过获取目标 div 的位置，然后通过将宽度除以一半并将其添加到左侧来获取中心。

    new_left =  hovered_thing.left + (hovered_thing.width / 2) - (popup_div.width / 2)

让我尽快为你做一些小提琴不过，另一方面，您是否尝试过气垫卡？可能与您想做的类似

http://designwithpc.com/Plugins/Hovercard

【讨论】：

感谢您的演示。很容易理解。

【解决方案2】：

jquery ui 提供了dialog 功能

它背后的想法是你有你的锚绑定它显示和隐藏你的弹出窗口

$('#anchor').bind({
    'mouseenter' : function() {
        $('#popUp').show();
    },
    'mouseleave' : function() {
        $('#popUp').hide();
    }
});

您必须将弹出窗口的位置设置为。请注意，只有当弹出 div 显示不是 none 时，您才能使用 $('#popup').outerWidth()/2 和 $('#anchor').outerWidth() / 2 ...

【讨论】：