修改图像映射悬停工具提示

Question

我有图像地图的工作示例（没有得到赞誉）。

http://jsfiddle.net/w713qevm/

$('.one,.two,.three').css({
    position: 'absolute'
}).hide()
$('area').each(function(i) {
    $('area').eq(i).bind('mouseover mousemove', function(e) {
        $('.one,.two,.three').eq(i).css({
            top: e.pageY+10,
            left: e.pageX+10
        }).show()
    })
    $('area').eq(i).bind('mouseout', function() {
        $('.one,.two,.three').hide()
    })
})

我正在尝试修改工具提示，从跟踪光标到显示在特定位置。然而，当我修改这个scipt位置总是相对于页面（如绝对定位）。我想让它相对于图像而不能做到。

Answer 1

在您的代码示例中

function(e){...
   .css({
      top: e.pageY+10,
      left: e.pageX+10
    })
...
}

e表示由鼠标移动和鼠标移动触发的事件。 CSS位置基于事件位置。只需将CSS改为absoloute位置即可。见下文。

function(e){...
   .css({
      top: 50,
      left: 50
    })
...
}