Question

出于学习的原因，我想实现一个工具提示，它跟随我的光标在我页面中的某个元素中。对于本练习，我想使用普通的Javascript来完成这项任务。画布应在带边框的矩形中显示当前光标位置。有人能发现错误吗？

我的页面如下：

在头部我有CSS声明

<style>
  #tt  {
   border: 10px green;
   position: absolute;
   left: -100px; /* initially invisible */
   top: 0;
  }
</style>

在HTML正文中，我已经定义了这样的工具提示：

<canvas id="tt" width="80" height="15"></canvas>
<br>
<div id="area">
  <!-- This is the area where I display my tooltip -->
</div>

现在转到JavaScript部分：

我正在捕捉“mousemove”事件，

document.getElementById("area").addEventListener("mousemove",mouseMove,false);

具有以下全局定义：

hcan=document.getElementById("tt");
hctx=hcan.getContext('2d');

并使用以下代码编写工具提示：

var hx=e.clientX;
var hy=e.clientY;
hcan.style.left=hx+"px";
hcan.style.top=hy+"px";
hctx.clearRect(0,0,80,15);
hctx.fillStyle="red";
hctx.fillText(hx+'/'+hy,0,10);

我可以在鼠标光标后面看到工具提示文字，但是我看不到工具提示的边框，我在声明中已经定义了。

当我调用clearRect时，是否可以隐式删除边框？但这应该只清除画布的内部部分，而不是边框，这只是装饰 - 我认为。

Answer 1

尝试添加边框样式，否则您将定义10px green none

border: 10px solid green;

应该这样做。

Javascript：我的工具提示没有显示其边框

1 个答案: