Question

我创建了一个简单的列表。当其中一个img悬停时，我想让div li出现。我想让img div显示在当前鼠标坐标处。

我可以完成所有工作，但不能在坐标处完成：

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;;
}

JQ ：

$('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

FIDDLE DEMO

$('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

Div出现在鼠标坐标上

2 个答案: