Question

我已经查询显示一个信息框，或者你可以说鼠标悬停在工具提示上，但是没有得到如何在移动鼠标指针时移动该框。以下是我的代码：

$(".info img").hover(function(e){
    $("#dialogbox").show();
}, function(){
    $("#dialogbox").hide();
});

<div class="info"><img src="images/i.jpg" alt="info" /></div>

提前致谢

Answer 1

当鼠标移动时，您通过.css()设置其位置：

$("#dialogbox").css('position', 'absolute');

$(".info img").mousemove(function(e) {
  $("#dialogbox").css({'left': e.pageX, 
                       'top':  e.pageY});
});

Answer 2

使用jquery的mousemove方法。您可以获取鼠标指针的当前位置，并将这些坐标设置为相关div的“顶部”和“左侧”值。将div的“position”属性设置为“absolute”。类似于以下代码的东西。

$(".info img").mousemove(function(event) {

$("#dialogbox").css({"top":event.pageY , "left":event.pageX});

});

鼠标移动时移动信息框或工具提示

2 个答案: