jQuery的 - 不能使用clientX更改CSS屬性

Question

這裏是我的問題

我想從它的鼠標位置的位置移動一個div當我鼠標懸停的元素。

幾乎就像一個「工具提示」，但當我mouseover它不移動。下面是代碼：

$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

編輯： 哇多數民衆贊成真的超級快的答案IM要去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; 
}