在沒有滾動偏移的情況下懸停時顯示元素

我試圖從AjaxControlToolkit中編寫一個jQuery相當於HoverMenuExtender，這樣當我將鼠標懸停在元素上時，我可以顯示包含某些上下文相關的div幫幫我。在沒有滾動偏移的情況下懸停時顯示元素

我可以做這項工作時，第一次加載頁面（鼠標懸停在第一個幫助符號）：
enter image description here

但是當頁面滾動下來，DIV是垂直滾動的偏移量（想必如果我有水平滾動它會移到右邊太）（鼠標依然徘徊在第一幫助符號）： enter image description here

我jQuery是：

$('.hoverHelpAnchor').hover(function (e) 
{ 
    $(this).next().show().css('left', e.pageX).css('top', e.pageY); 
} 
, function() 
{ 
    $(this).next().hide(); 
});

CSS是：

.hoverHelp 
{ 
    display: none; 
    background-color: White; 
    border-style: solid; 
    border-width: thin; 
    border-color: Black; 
    width: 200px; 
    z-index: 10000; 
    position: fixed; 
    margin: 2; 
}

和我的標記是：

<img src="@Url.Content("~/Content/images/help.png")" class="hoverHelpAnchor" alt="" /> 
<div class="hoverHelp"> 
    Project Name help blah blah blah very very very very very very very very long string that I want to word-wrap 
</div>

我會很感激，如果有人能指出什麼我缺少以佔頁面滾動所以DIV不會出現在偏移位置。

來源

2012-07-04 PhilPursglove

也許你可以從jQuery的用戶界面的提示中的地位位置雖然你沒有使用jquery-ui http://jqueryui.com/demos/position/#default – Willy

我希望我的理解是，右

獲取元素的地方徘徊發生，並顯示在同現在的位置是你的提示或某處大約

$('.hoverHelpAnchor').hover(function (e) 
    { 
     var pos = $(this).position(); 
     $(this).next().show().css('position', 'absolute').css('left', pos.left).css('top', pos.top); 
    } 
    , function() 
    { 
     $(this).next().hide(); 
    });

來源

2012-07-04 09:40:18 Rab

您需要將懸停幫助盒子放置在問號框內，然後從那裏定位。

您也可以通過隱藏幫助元素完全使用CSS來完成此操作，然後在:hover上方的問號中取消隱藏其中的工具提示。

這裏我只是做了JSFIDDLE

來源

2012-07-04 09:33:30 jamcoupe

你的元素的定位是造成問題的一個例子。您可能希望它定位在absolute。

來源

2012-07-04 09:36:59 shxfee

在沒有滾動偏移的情況下懸停時顯示元素

回答

相關問題