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

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代表mousemove和mouse over触发的事件。 CSS 位置基于事件位置。只需将 CSS 更改为绝对位置即可。见下文。

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