Question

无法弄清楚为什么我的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但不幸的是没有运气。

提前致谢， NickG

Answer 1

您的代码必须像这样

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

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

Answer 2

您的选择器错了。它应该是

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

Answer 3

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

$('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 example

您选择的a[rel=tooltipimage]不存在，但a.tooltipimage确实存在。
您还选择了不存在的#tooltip，但.tooltip确实存在。
.bind()已被弃用，支持.on()
你的开场跨度标签不正确，但我想这只是一个错字。
由于您也想隐藏工具提示，我使用.hover()隐藏了mouseleave上的工具提示。

Answer 4

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

以下应该可以解决问题：

<强> DEMO

$('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个结束跨度标签但没有起始标签。

Answer 5

您的代码存在一些问题，您的第一个span正在关闭，未打开，您正在使用锚的错误选择器，并且您正在使用< em> 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 事件，使其看起来更像是工具提示。

Answer 6

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

DEMO

<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;
}

Answer 7

$('a[rel="tooltipimage"]')

我认为你需要引号。

div不会显示在图像悬停上

7 个答案: