1

无法弄清楚为什么我的 div 不会在此悬停时显示任何帮助表示赞赏。

$('a[rel=tooltipimage]').bind('mouseover',function(e){
e=e?e:window.event;
$('#tooltip').css({
position:'absolute',
top:e.pageY,
left:e.pageX
});
})

HTML：

</span>
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a>
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;">
<b>tooltip text goes here</b><br />                                                                 
 </div>

我要做的就是在鼠标悬停时显示浮动在图像旁边的 div，并在它们离开时消失。我已经安装了 jquery 和所有东西，但是当我只需要最简单的工具提示时，我不想放入一堆插件和东西。如果我不在经典的 asp 中，我可以使用 modalpopup 但不幸的是没有运气。

在此先感谢，尼克

4

7 回答 7

1

你的代码需要是这样的

$('a.tooltipimage').bind('mouseover',function(e){
e=e?e:window.event;
$('.tooltip').css({
position:'absolute',
top:e.pageY,
left:e.pageX
});
})

由于工具提示是一个类而不是一个 ID

于 2013-04-05T17:19:12.970 回答
1

你的选择器是错误的。它应该是

$('a.tooltipimage').bind('mouseover',function(e){
    e = e ? e : window.event;
    $('.tooltip').css({
        position:'absolute',
        top:e.pageY,
        left:e.pageX,
        display: 'block'
    });
});
于 2013-04-05T17:20:31.670 回答
1

您的代码有几个错误。试试这个：

$('a.tooltipimage').hover(function (e) {
    e = e ? e : window.event;
    $('.tooltip').show().css({
        position: 'absolute',
        top: e.pageY,
        left: e.pageX
    })
}, function () {
    $('.tooltip').hide()
});

jsFiddle 示例

  • 您正在选择a[rel=tooltipimage]哪个不存在，但a.tooltipimage确实存在。
  • 您还选择#tooltip了哪些不存在，但.tooltip确实存在。
  • .bind().on()自 1.7起已弃用，取而代之的是
  • 您的开始跨度标签不正确，但我想这只是一个错字。
  • 由于您也想隐藏工具提示，因此我曾经.hover()在 mouseleave 上隐藏工具提示。
于 2013-04-05T17:21:28.117 回答
1

您的 a 标签没有属性 rel 等于tooltipimage。但是它有一个名为 tooltipimage 的类。此外，您隐藏了工具提示，但再也没有显示它。

以下应该可以解决问题：

演示

$('a.tooltipimage').bind('mouseover',function(e){
    e=e?e:window.event;
    $('.tooltip').css({
        display: 'block',
        position:'absolute',
        top:e.pageY,
        left:e.pageX
    });
})

您的 html 中的一个小错误是，您有 2 个结束跨度标签，但没有起始标签。

于 2013-04-05T17:22:07.810 回答
1

您的代码有几处错误，首先span是关闭，而不是打开，您使用了错误的选择器anchor，并且您使用id选择器而不是div的类选择器。将所有CSS应用到div后，您必须显示它。

标记：

<span>
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a>
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;">
<b>tooltip text goes here</b><br />                                                                 
 </div>

jQuery :

$('.tooltipimage').on('mouseover',function(e)
{
    e=e?e:window.event;
    $('.tooltip').css(
    {
        position:'absolute',
        top:e.pageY,
        left:e.pageX
    }).show();
}).on("mouseout",function(){$('.tooltip').hide()});

jsfiddle：http: //jsfiddle.net/vgYeR/

我还绑定了mouseout事件，使它看起来更像一个工具提示。

于 2013-04-05T17:24:43.803 回答
1

如果您可以更改某些 html，则不必使用 javascript（除非定位必须是动态的。然后您可以使用 javascript 进行设置）。你可以用普通的CSS来做到这一点。如果你只想要一个小文本，你总是可以使用title属性

演示

<span class="tooltipimage">
    <a href="#"><img src="/applications/images/icons/info_icon.gif"/></a>
    <label>tooltip text goes here</label>
</span> 


.tooltipimage:hover label{
    display:block;
}

.tooltipimage label{
    display:none;
    position:absolute;
    top:0px;
    left:20px;
}

.tooltipimage{
    display:block;
    position:relative;
}
于 2013-04-05T17:41:10.403 回答
-1 
$('a[rel="tooltipimage"]')

我想你需要引号。

于 2013-04-05T17:18:35.787 回答