0

我正在尝试从 AjaxControlToolkit 编写一个与HoverMenuExtender等效的 jQuery ，这样当我将鼠标悬停在一个元素上时，我可以显示一个包含一些上下文相关帮助的 div。

我可以在页面首次加载时完成这项工作（鼠标悬停在第一个帮助符号上）：
在此处输入图像描述

但是当页面向下滚动时，div 会被垂直滚动的量所抵消（如果我有水平滚动，它也会向右移动）（鼠标仍然悬停在第一个帮助符号上）： 在此处输入图像描述

我的 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 就不会出现在偏移位置。

4

3 回答 3

2

我希望我明白了，对吧

获取发生悬停的元素的位置，并在同一位置或周围某处显示您的工具提示 

  $('.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-04T09:40:18.390 回答
1

您对元素的定位引起了问题。您可能希望它定位absolute。

于 2012-07-04T09:36:59.897 回答
0

您需要将悬停帮助框绝对定位在问号框内，然后从那里定位。

您也可以完全使用 CSS 来完成此操作，方法是隐藏帮助元素，然后在:hover问号上方取消隐藏其中的工具提示。

这是我刚刚制作的JSFIDDLE 示例

于 2012-07-04T09:33:30.023 回答