在mouseover上更改重疊信息框的zIndex

我在我的地圖（必應地圖AJAX v7）中使用了自定義HTML內容的多個信息框。由於其中一些接近，信息框有時會重疊。在mouseover上更改重疊信息框的zIndex

此外，我期望，當鼠標在其中一個，它來到前景和（選擇）回到鼠標離開時的背景。

因此，通過使用zIndex財產，我增加了這些行：

Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', function(e) { 
    infobox.setOptions({zIndex : 300}); 
}); 
Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', function(e) { 
    infobox.setOptions({zIndex : 0}); 
});

然而，事情會奇怪這些行：

當鼠標進入，信息框，使位置的跳直到下一個地圖重繪。
從不調用mouseleave回調。

我轉載此上的jsfiddle：http://jsfiddle.net/wXFhy/7

有沒有人對爲什麼或如何任何想法？謝謝！

來源

2012-07-04 alexstrat

我沒找到這種行爲的原因。然而，我改變了技術，以獲得我只想使用CSS（與z-index和:hover），而不是使用JavaScript，並且效果很好。見http://jsfiddle.net/wXFhy/8/。

我添加了這些的CSS屬性：

.FriendPinMap { 
    float: left; 
    position: absolute; 
    z-index:0; 
} 

.FriendPinMap:hover { 
    z-index:3; 
}

併除去的JavaScript做（不好）的等價物。

來源

2012-07-06 08:52:46 alexstrat

我認爲這個問題與您通過信息框中的htmlContent選項使用自定義HTML內容有關。我看到您的自定義內容向左移動。我不知道爲什麼，但是當您在html內容中使用CSS浮動時，它似乎會導致Bing地圖出現問題。我評論了左邊的花車，並且跳躍的行爲消失了。

http://jsfiddle.net/wXFhy/10/

至於鼠標請假沒有得到所謂的，它可能有做與您的自定義HTML內容爲好。嘗試從一個簡單的div開始，看看鼠標離開是否被調用。如果可行，而不是依靠css來佈置信息框，請嘗試使用表。我知道你應該使用CSS來佈局，但是對於bing地圖信息框，我發現無論出於何種原因，表格都可以更好地工作。

來源

2012-07-05 22:27:07

謝謝@bojin，但實際上，它不像我原本預期的那樣工作。我剛剛發佈了一個僅適用於css的解決方案。但我也認爲，「浮動：左」是問題的一部分。 – alexstrat

在mouseover上更改重疊信息框的zIndex

回答

相關問題