javascript - div 出现在鼠标坐标上

Question

我创建了一个简单的列表。我想让 divimg在其中一个li悬停时出现。我想让那个imgdiv 出现在当前鼠标坐标处。

我可以使它全部工作，但不能在坐标处：

http://jsfiddle.net/tmyie/fwgRE/2/

HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul> 
<div class="img"> </div>

CSS：

ul {       
    font-size: 24pt;
}   
.img {
    display:none;
    width: 35px;
    height: 35px;
    background-color:salmon;
    position: absolute;;
}

ĴQ：

$('li').mouseenter(function(){
    $('.img').fadeIn();
});  
$('li').mouseleave(function(){
    $('.img').fadeOut();
});

Answer 1

将您的 js 代码更改为：

$('li').mouseenter(function(e){
    $('.img').css({left:e.pageX, top:e.pageY}).fadeIn();
});

会做的工作

Answer 2

小提琴演示

$('li').mousemove(function( e ){
    $('.img').css({left: e.pageX+12, top: e.pageY-12}); // + correct position
}).hover(function( e ){
    $('.img').stop().fadeTo( 300, e.type=='mouseenter'? 1 : 0 );    
});

如果您想直观地了解鼠标坐标，我创建了一个演示：http: //jsbin.com/avupid/3