Javascript jQuery-不能使用clientX更改css属性

这是我的问题

当我将鼠标移到某个元素上时，我想将div从其位置移动到鼠标位置

几乎就像一个“工具提示”，但当我把鼠标移到上面时，它不会移动。代码如下：

$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+'px'”似乎不起作用，我是否可以让它起作用？ top属性更改没有问题，但我无法使鼠标值正常工作

如何将item.left和.top值更改为鼠标的值

提前准备

-Thaiscorpion

编辑：

---

哇，这是非常快速的答案，我现在就要试一下，谢谢

您需要更改其

位置

属性，可能还需要更改

z-index

。

您正在将css属性设置为

事件.clientXpx

。将

event.clientX

置于引号之外：

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

替换：

$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");         
 });

---

您将事件对象视为字符串。因此，对

$.css（）

的调用更像是这样：

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

---

演示：

这是您的代码的重做版本：

css:

---

确保工具提示具有

位置：绝对也是。哇，这对演示来说太棒了，这正是我想要的！：D
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();
});

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