鼠標懸停/單擊時彈出Div錨點

Question

我是Web編程的新手。

我想在Facebook中實現類似的功能，當我們將鼠標懸停在鏈接上時，將在鏈接上方顯示一個錨定在鏈接上的arrow-floating-div。

你們都如何解決這類問題？ 我找到的最接近的庫是http://gristmill.github.com/jquery-popbox/在某些瀏覽器中，這有時無法正常工作。 進一步搜索“ Popbox”不會顯示任何有用的結果。 誰能推薦任何類似的圖書館，例如我發布的鏈接？ 它可以使用Jquery，Javascript，CSS，html等。

除了使用庫，任何人都可以以最簡單的方式告訴我如何在不使用庫的情況下進行操作。 我只想知道背后的大概想法。 大多數庫都帶有復雜的代碼，對於初學者來說很難學習。

非常感謝高級。

Answer 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

Answer 2

jQuery UI提供了對話框功能

其背后的想法是您具有錨綁定，它顯示和隱藏彈出窗口

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

您必須將彈出窗口的位置設置為。 請注意，只有當彈出div的顯示不為空時，您才可以使用$（'＃popup'）。outerWidth（）/ 2和$（'＃anchor'）。outerWidth（）/ 2 ...