如何在图像的选定区域上的文本上方添加鼠标？

这是我对您问题的解决方案。演示（显示如何用2分来做）

它涉及一个相对定位的div，以您的图像作为背景。然后，有一些绝对定位的“悬停点”触发工具提示。

完成此操作后，您可以根据需要删除红色边框并设置工具提示的样式。

的HTML

<div id="image">
    <div class="hoverPoint" style="top:312px;left:178px;" data-content="This is a test (A)"></div>
    <div class="hoverPoint" style="top:37px;left:379px;" data-content="This is a test (C)"></div>
    <div id="tooltip"></div>    
</div>

jQuery的

$('.hoverPoint').mouseenter(function(){
    $('#tooltip')
        .css({
            top: ($(this).position().top-30) + 'px',
            left: $(this).position().left + 'px'
         })
         .html( $(this).data('content') )
         .show();
}).mouseleave(function(){
    $('#tooltip')
        .html('')
        .hide();
});

的CSS

#image{
    background:url(http://oi44.tinypic.com/2ur9to5.jpg) no-repeat;
    width:888px;
    height:441px;
    position:relative;
}
#tooltip{
    position:absolute;  
    background:#fff;
    border:1px solid #999;
    padding:4px;
    display:none;
}
.hoverPoint{
    position:absolute;
    width:47px;
    height:47px;
    border:1px solid #f00;
    cursor:pointer;
}