2

簡単なリストを作成しました。imgの1つがホバーされたときにdivを表示したいと思いliます。imgそのdivを現在のマウス座標に表示したいと思います。

私はそれをすべて機能させることができますが、座標ではできません:

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

jQ :

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

2 に答える 2

4

js コードを次のように変更します。

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

仕事をします

于 2013-09-10T00:37:53.160 に答える
0

フィドルのデモ

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

于 2013-09-10T00:50:45.530 に答える