Question

<script type=text/javascript src=http://code.jquery.com/jquery-1.8.2.js></script>
<script type=text/javascript>
$(document).ready(function(){
$("#image").mousemove(function(e) {
    $("#pop-up").fadeIn(0);
    $("#pop-up").offset({
        top: e.pageY - $("#pop-up").outerHeight()+2,
        left: e.pageX - ($("#pop-up").outerWidth()+18)
    });
}).mouseleave(function() {
    $("#pop-up").fadeOut(250);
                     });
                                             });
</script>

我不确定要设置偏移量，现在图像位于鼠标指针的左上方，我想将其移动到右下角。或者我应该在jquery中使用另一个选项（hover（）？）

HTML code：

             <div>
             <span id="pop-up" style="position: absolute; display:none;">
             <img src="../images/webp01.png" id="re"></span>
             <div id="image" style="width:208px; height:318px; margin-left: 150px;"><a href="#">
             <img src="../images/webp02.png" border=none /></a></div>
             </div>

Answer 1

http://jsfiddle.net/8GVFC/2/

$(document).ready(function(){
$("#image").mousemove(function(e) {
    $("#pop-up").fadeIn(0);
    $("#pop-up").offset({
        top: e.pageY+20, // Approximate mouse height: 20
        left: e.pageX+15 // Approximate mouse width: 15
    });
}).mouseleave(function() {
    $("#pop-up").fadeOut(250);
                     });                                             
});

Answer 2

检查此fiddle

<强> 的JavaScript

$(document).ready(function(){
$("#image").mousemove(function(e) {
    $("#pop-up").fadeIn(0);
    $("#pop-up").offset({
        top: e.pageY - $("#myImage").outerHeight(),
        left: e.pageX  - ($("#myImage").outerWidth())
    });
}).mouseleave(function() {
    $("#pop-up").fadeOut(250);
                     });                                             
});

<强> HTML

<div >
    <span id="pop-up" style="position: absolute; display:none;">
        <img id='myImage' width=30  height=100 src="../images/webp01.png" id="re">
    </span>
    <div id="image" style="border:solid 1px black; width:208px; height:318px; margin-left: 150px;"><a href="#">
        <img src="../images/webp02.png" border=none /></a>
    </div>
</div>

将鼠标悬停在图像上方从左上角到右下角

2 个答案: