如何获得鼠标的位置并在其旁边放置一个元素

How do you get the location of the mouse and place a element beside it?

本文关键字：元素 一个 鼠标 何获得 位置      更新时间：2023-09-26

如何获得鼠标的位置，然后在其旁边放置HTML元素?
例如，如果我有一个<textarea>，我希望鼠标在鼠标悬停时显示工具栏，我该如何做到这一点?

您可以在文本区域的鼠标移动函数中使用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();
});

答案如下:html -工具提示相对于鼠标指针的位置

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

这个怎么样?

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;
    //...
});
相关文章：