jQueryの - カントは私が要素をマウスオーバー時にマウスを置いた位置にその位置からのdivを移動する

Question

はここに私の問題

されるCSS属性を変更するためにclientXを使用しています。

「ツールチップ」に似ていますが、マウスオーバーすると移動しません。ここでは、コードは次のとおりです。

$item.mouseover(function(){ 

//make visible 
    $tooltip.show(); 

    //change left and top values to mouse values 
    $tooltip.css("left","event.clientX + 'px'"); 
    $tooltip.css("top","200px");   
}); 

「event.clientX + 『ピクセル』が」動作するようには思えない、私はこの仕事を得ることができますとにかくありますか？ トップアトリビュートは問題なく変更されていますが、マウスの値を取得することはできません。

どのようにitem.left & .topの値をマウスのものに変更できますか？

ty！

-Thaiscorpion

編集： うわーthatsのイムtrythem今ありがとう本当に超高速応答のために！

Answer 1

。だから、$.css()へのお電話は、より多くのこのようになります：

$item.mouseenter(function(event){ 
    $tooltip 
    .show() 
    .css({ 
     left: event.clientX + "px", 
     top: '200px' 
    }); 
}); 

デモ：http://jsbin.com/uzicek/5/edit

Answer 2

positionプロパティを変更する必要があります。おそらくz-indexも変更する必要があります。

Answer 3

CSSプロパティを文字通りevent.clientXpxに設定しています。引用符の外event.clientXを置く：

$tooltip.css("left", event.clientX + "px"); 

Answer 4

は交換してください：

$item.mouseover(function(){ 

    //make visible 
    $tooltip.show(); 

    //change left and top values to mouse values 
    $tooltip.css("left","event.clientX + 'px'"); 
    $tooltip.css("top","200px");   
}); 

をして：あなたは、文字列としてイベントオブジェクトを処理している

$item.mouseover(function(){ 

//make visible 
$tooltip.show(); 

//change left and top values to mouse values 
$tooltip.css("left",event.clientX + 'px'); 
$tooltip.css("top","200px");   
}); 

Answer 5

ここでは、あなたのコードのやり直しバージョンです：http://jsfiddle.net/maniator/EzdBx/

var $tooltip = $('#tooltip') 

$('.hover').hover(function(event) { 
    //make visible 
    $tooltip.show(); 
    //change left and top values to mouse values 
    $(this).bind('mousemove', function(event) { 
     $tooltip.css("left", event.clientX); 
     $tooltip.css("top", event.clientY); 
    }) 
}, function() { 
    $tooltip.hide(); 
}); 

CSS：

#tooltip { 
    display: none; 
    position: absolute; 
    /* anything you want here and below */ 
    width: 50px; 
    background: blue; 
}