通過類似工具提示的DIV

這裏傳播JavaScript事件是什麼，我試圖達到的jfiddle：http://jsfiddle.net/fmvmA/通過類似工具提示的DIV

我有我面臨這個例子中的兩個問題;我認爲這兩者都與事件傳播有關。當鼠標進入容器時，我希望有一個div在光標後面。當光標離開容器時，下面的div應該消失。這看起來應該很簡單......但是我在移動鼠標時遇到了div閃爍的問題，我的猜測是因爲鼠標技術上在tooltop div出現時離開容器。

此外，我希望能夠點擊容器內的任何地方，並將tooltip div的副本附加到被點擊的位置。這個例子是挑剔的...但如果你設置偏移量，以便工具提示div不再重疊鼠標，那麼你可以看到它的工作。

有沒有簡單的方法來實現我的兩個目標？提前致謝。

來源

2012-03-05 ThePromoter

它閃爍，因爲它觸發鼠標移開時，將顯示工具提示，因爲#ghost是在容器外..裏面移動它，它應該是所有設置..

DEMO

HTML：

<div id="container"> 
    <div id="ghost"> 
    Click to drop me! 
    </div> 
</div>

編輯：具有的#ghost不會隱藏，即使米容器內，當我發現一個bug因此我在#ghost上添加了一個偏移量，所以它在光標下方出現2px。

JS：

$('#container').on('mousemove', function(event) { 
    $('#ghost').css({ 
     left: event.pageX - $('#ghost').width()/2, 
     top: ((event.pageY - $('#ghost').height()/2) + 2) // +2 px is the offset 
    }); 
});

來源

2012-03-05 16:14:56

感謝您的快速響應！我注意到你的解決方案的一件事是，當你將鼠標移出容器時，ghost div不會被隱藏。此外，它將允許您點擊容器外部並放置一個盒子。有什麼想法嗎？ – ThePromoter 2012-03-05 16:48:41

@ThePromoter你試過我的DEMO鏈接嗎？另請參閱我的編輯帖子。 – 2012-03-05 16:55:51

是的，這是我在測試解決方案時使用的鏈接。如果我慢慢地將鼠標從容器中移出，文本會變得一起變髒，這會導致div的高度增加，因此鼠標再次位於其中。我一定會看到你的解決方案是如何工作的，但無論如何要讓鼠標直接指向幽靈的內部，它才能工作。再次感謝你的幫助！ – ThePromoter 2012-03-05 17:05:02

這裏是一個可行的演示，你需要調整追加定位了一下。我留下了只按原始演示點擊的方法

http://jsfiddle.net/fmvmA/4/

來源

2012-03-05 16:23:31 charlietfl

你的解決方案似乎做的伎倆......但只有當鬼div被定位爲脫離鼠標。有沒有一種解決方法，以便ghost div基本上將點擊事件傳遞給容器div來處理，還是我只是要求出一些可能性領域的東西？謝謝！ – ThePromoter 2012-03-05 16:52:23

如果您先將幽靈添加到容器中，那麼即使鼠標下面有幽靈，鼠標仍然會將容器懸停。否則，你會觸發容器的mouseleave。如果先追加，可能需要添加一個類或它的東西...如果clcik沒有發生，很容易刪除 – charlietfl 2012-03-05 16:58:35

通過類似工具提示的DIV

回答

相關問題