你如何获得鼠标的位置并在它旁边放置一个元素？ [关闭]答案

【问题标题】：How do you get the location of the mouse and place a element beside it? [closed]你如何获得鼠标的位置并在它旁边放置一个元素？ [关闭]
【发布时间】：2014-06-29 03:09:32
【问题描述】：

如何获取鼠标的位置，然后在其旁边放置一个 HTML 元素？
例如，如果我有一个<textarea>，并且我希望鼠标悬停在它上面时会出现一个工具栏，我该怎么做？

【问题讨论】：

craigsworks.com/projects/qtip
你的代码在哪里？还是您希望我们只为您工作？
@JakeGould，我打算发布我的代码，但我真正想要的是获得该位置所需的属性，所以我决定不需要我的编码。但是，jqueryrocks 给了我我需要的一切。

标签： javascript jquery html css

【解决方案1】：

您可以在 textarea 的 mousemove 函数中使用 event.pageX 和 event.pageY 获取 x 和 y 坐标。

$('textarea#myText').mouseenter(function(event) {
  $('#toolbar').show();
});
$('textarea#myText').mousemove(function(event) {
  var left = event.pageX + 20;
  var top = event.pageY + 20;
  $('#toolbar').css('left', left).css('top', top);
});
$('textarea#myText').mouseleave(function(event) {
  $('#toolbar').hide();
});

【讨论】：

谢谢！根据您的用户名，我怀疑您喜欢 JQuery。

【解决方案2】：

答案可以在这里找到： HTML-Tooltip position relative to mouse pointer

查看此jsFiddle 了解更多信息。

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';

    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

【讨论】：

+1 用于使用原始 JavaScript 而不是 JQuery

【解决方案3】：

这个怎么样？

http://jsfiddle.net/TL7V7/5/

yourText = document.getElementById('yourText');
yourToolbar = document.getElementById('yourToolbar');
yourText.addEventListener('mouseenter',function(e){
    setTimeout(function(){
        yourToolbar.style.opacity=opacity_hi;
        //this CSS3 renders faster:
        yourToolbar.style.transform='translate('+(1000+mx-10)+'px,'+(1000+my+10)+'px)';
        yourToolbar.style.webkitTransform='translate('+(1000+mx-10)+'px,'+(1000+my+10)+'px)';
    },hide_delay/2);
    //...
});
yourText.addEventListener('mousemove',function(e){
    mx=e.pageX;
    my=e.pageY;
    //...
});

查看上面的链接。

【讨论】：

也谢谢您！这就是我喜欢 Stack Overflow 的原因。你这么快就得到了这么多很好的答案！