Question

我要使用mousemove属性在同一个类中有多个跨度，要跟踪光标。

我尝试使用document.querySelectorAll，document.querySelector，document.getElementById，document.getElementsByClassName，addEventListener ...

这是实际的工作代码jsfiddle

window.onmousemove = function (e) {
  var tooltipSpan = document.getElementById('tooltip1');
  var x = e.clientX,
      y = e.clientY;

  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

.para {
  text-decoration: none;
  position: relative;
}
.para span {
  display: none;
}
.para:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

.ttip {
  color: white;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0);
  background-color: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

<p class="para">
  Some text <span id="tooltip1" class="ttip">and here is a follower tooltip</span>
</p>
<p class="para">
  Some other text <span id="tooltip2" class="ttip">I want this to follow too, but without defining again for each new span tag</span>
</p>

我得到的更远的是鼠标之后的第一个span元素，而不是其他元素。我希望其他标签的工具提示也跟随光标，但不要为我放入页面中的每个新的span标签再次定义。

Answer 1

我在类上使用querySelectorAll并随后用.forEach()遍历结果元素没有问题

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

  var tooltipSpans = document.querySelectorAll('.ttip');

  tooltipSpans.forEach(tooltipSpan => {
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
  });
}

.para {
  text-decoration: none;
  position: relative;
}

.para span {
  display: none;
}

.para:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

.ttip {
  color: white;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0);
  background-color: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

<p class="para">
  Some text <span id="tooltip1" class="ttip">and here is a follower tooltip</span>
</p>
<p class="para">
  Some other text <span id="tooltip2" class="ttip">I want this to follow too, but without defining again for each new span tag</span>
</p>

编辑

需要澄清的是，这里是发生的事情的细分。

var tooltipSpans = document.querySelectorAll('.ttip');

这将返回具有类名ttip的DOM节点数组

tooltipSpans.forEach(func)

这会对数组中的每个元素执行一个功能

tooltipSpan => {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

这是一个箭头功能。几乎与以下内容相同：

function alignSpan(tooltipSpan) {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

除了范围略有不同之外，请参见Arrow Functions了解更多信息。这是缩短函数语法的好方法，特别是当您以内联方式声明它们时（例如在forEach内部）。

这是您编写此内容的另一种方式，看起来可能比较熟悉。

function alignSpan(tooltipSpan) {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

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

  var tooltipSpans = document.querySelectorAll('.ttip');

  tooltipSpans.forEach(alignSpan);
}

Answer 2

您可以使用事件的target并在其下搜索工具提示。

window.onmousemove = function(e) {
  var tooltipSpan = e.target.querySelector('.ttip')

  if (tooltipSpan) {
    var x = e.clientX,
      y = e.clientY;

    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
  }
}

.para {
  text-decoration: none;
  position: relative;
}

.para .ttip {
  display: none;
}

.para:hover .ttip {
  display: block;
  position: fixed;
  overflow: hidden;
}

.ttip {
  color: white;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0);
  background-color: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

<p class="para">
  Some text <span id="tooltip1" class="ttip">and here is a follower tooltip</span>
</p>
<p class="para">
  Some other text <span id="tooltip2" class="ttip">I want this to follow too, but without defining again for each new span tag</span>
</p>

使多个工具提示跟随鼠标移动

2 个答案: