如何使用jQuery創建浮動div div

當鼠標懸停在某個類的元素A上時，應該會出現另一個包含鏈接的浮動div B. B只要鼠標離開A和B就應該消失。如何使用jQuery創建浮動div div

如何使用jQuery來做到這一點？ jsFiddle

var container = $('#container'); 
var area = $('.area'); // this is A 
var position = area.offset(); 

var floating = $("<div />", { 
     css : { "position" : "absolute", 
       "top"  : position.top - 30, 
       "left"  : position.left + 20, 
       "border" : "1px solid #000", 
       "padding" : "5px", 
       "display" : "none", 
       "z-index" : "100", 
       "background-color" : "#F00" 
     } 
    }) 
     .text('Hello World'); // this is B 

    container.css('position', 'relative'); 
    container.append(floating); 

    function show() { 
     floating.show(); 
    } 

    function hide() { 
     floating.hide(); 
    } 

    area.on('mouseenter', show); 
    area.on('mouseleave', hide); 
    floating.on('mouseenter', function(event) { 
     console.log("floating: mouseenter"); 
     area.off('mouseenter', show); 
     area.off('mouseleave', hide); 
    }); 
    floating.on('mouseleave', function(event) { 
     console.log("floating: mouseleave"); 
     area.on('mouseenter', show); 
     area.on('mouseleave', hide); 
    });

我的問題是evertime鼠標進入B，B已經消失。我需要用jQuery來做到這一點，不僅僅是CSS。

來源

2014-03-12 Explicat

我不知道爲什麼你必須把浮動div在jQuery中。這可能是我如何實現類似於你想要的東西。

http://jsfiddle.net/A2gFb/6/

只要把隱藏的漂浮在HTML，

<div class="area">luptatum zzril 
    <div class="fixed">Hello World!</div> 
</div>

適當CSS集。

.area { 
    position: relative; 
    color: #0F0; 
    font-weight: bold; 
    /* you may want to set the width/height here as well*/ 
} 

.fixed { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    border: 1px solid black; 
    padding: 5px; 
    z-index: 100; /* Thanks Diego for pointing out the typo here */ 
    background-color: red; 
    display: none; 
}

而jQuery的將是如此簡單：

$(".area").mouseenter(function() { 
    $(".fixed").show(); 
}); 

$(".area").mouseleave(function() { 
    $(".fixed").hide(); 
});

來源

2014-03-12 09:43:04

'的z index'不以像素爲單位。 – Diego

只需添加：

floating.on('mouseenter', show); 
floating.on('mouseleave', hide);

它的工作原理上的jsfiddle。

順便說一下，我建議你不要使用「顯示」和「隱藏」作爲函數名稱，因爲它們已經存在於jQuery中。 showTooltip和hideTooltip可以是很好的名字。

來源

2014-03-12 09:33:12 MrPk

您遇到的主要問題是您的綠色文本的mouseleave事件在mouseenter之前爲您的浮動div觸發。爲了解決這個問題，我做了一個變量來跟蹤浮點中的鼠標，並使用hide（）函數中的setTimeout在100 ms後檢查這個變量。如果你擔心延誤，你可能會降低。 Here's the fiddle.

在JavaScript的頂部：

var inFloat = false;

獸皮（）函數變爲：

function hide() { 
    setTimeout(function(){ 
     if (!inFloat) 
      floating.hide(); 
    },100); 
}

而且你的浮動鼠標事件成爲：

floating.on('mouseenter', function(event) { 
    inFloat = true; 
}); 
floating.on('mouseleave', function(event) { 
    inFloat = false; 
    floating.hide(); 
});

你還有浮動div具有與鼠標位置無關的固定位置的問題因此，將鼠標懸停在鏈接上，然後有時候轉向浮動div可能會很麻煩。

來源

2014-03-12 09:38:27 Asymptote

如何使用jQuery創建浮動div div

回答

相關問題