鼠标悬停时光标跟随的 JavaScript 文本

Question

任务是: 当我将光标悬停在图钉上时，文本应该跟随鼠标移动。 不幸的是，文本的位置不正确。相当抵消。 它应该位于图钉旁边。

如何更好地计算位置？

var tooltipSpans = document.getElementsByClassName('nav-head');
        window.onmousemove = function (e) {
            var x = e.clientX,
                y = e.clientY,
                i, l = tooltipSpans.length;
            for(i = 0; i < l; i++){
              tooltipSpans[i].style.top = (y - 220) + 'px';
              tooltipSpans[i].style.left = (x - 420) + 'px';
            }
        };

 
		var tooltipSpans = document.getElementsByClassName('nav-head');
 
		window.onmousemove = function (e) {
		    var x = e.clientX,
		        y = e.clientY,
		        i, l = tooltipSpans.length;
		    for(i = 0; i < l; i++){
		      tooltipSpans[i].style.top = (y - 220) + 'px';
		      tooltipSpans[i].style.left = (x - 420) + 'px';
		    }
		};
 

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: white;
  font-family: "Roboto", sans-serif;
  background: black;
}

nav.anchor-nav {
  position: fixed;
  top: 0%;
  left: 0rem;
  z-index: 90;
  width: 490px;
  height: 490px;
  background: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
nav.anchor-nav ul {
  position: relative;
  display: inline-block;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: auto;
  -webkit-transform: none;
          transform: none;
}
nav.anchor-nav li {
  position: absolute;
  display: block;
  cursor: pointer;
  margin-bottom: 0.37rem;
  border-radius: 50%;
  transition: all .2s;
}
nav.anchor-nav li:before {
  opacity: 0;
  visibility: hidden;
  color: white;
  font-size: 2.0rem;
  height: 2.2rem;
  margin: 0;
  position: absolute;
  z-index: 1;
}
nav.anchor-nav li.active a {
  width: 100%;
  height: 100%;
}
nav.anchor-nav li.active a:after {
  border: 1px solid orange;
  background-color: orange;
}
nav.anchor-nav li.active a span {
  opacity: 1;
  visibility: visible;
}
nav.anchor-nav li.active:before {
  opacity: 1;
  visibility: visible;
}
nav.anchor-nav li.section01 {
  width: 40px;
  height: 40px;
  top: 380px;
  left: 55px;
}
nav.anchor-nav li.section01 .nav-head {
  left: -150px;
  top: 50px;
}
nav.anchor-nav li.section02 {
  width: 40px;
  height: 40px;
  top: 380px;
  left: 367px;
}
nav.anchor-nav li.section02 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section03 {
  width: 40px;
  height: 40px;
  top: 210px;
  left: 40px;
}
nav.anchor-nav li.section03 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section04 {
  width: 40px;
  height: 40px;
  top: 210px;
  left: 407px;
}
nav.anchor-nav li.section04 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section05 {
  width: 40px;
  height: 40px;
  top: 210px;
  left: -50px;
}
nav.anchor-nav li.section05 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section06 {
  width: 40px;
  height: 40px;
  top: 210px;
  left: 470px;
}
nav.anchor-nav li.section06 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section07 {
  width: 40px;
  height: 40px;
  top: 30px;
  left: 410px;
}
nav.anchor-nav li.section07 .nav-head {
  left: 0px;
  top: 50px;
}
nav.anchor-nav li.section08 {
  width: 40px;
  height: 40px;
  top: 1px;
  left: 50px;
}
nav.anchor-nav li.section08 .nav-head {
  left: -150px;
  top: 50px;
}
nav.anchor-nav li:hover a:after {
  border: 1px solid orange;
  background-color: orange;
}
nav.anchor-nav li:hover a span {
  display: block;
  position: fixed;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
nav.anchor-nav li:hover:before {
  opacity: 1;
  visibility: visible;
}
nav.anchor-nav a {
  position: relative;
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
nav.anchor-nav a:after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  border: 1px solid #fff;
  transition: all .4s;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  background: transparent;
}
nav.anchor-nav a span {
  display: none;
  transition: all .4s;
  opacity: 0;
  visibility: hidden;
  width: 400px;
}

<div class="container">
  <nav class="anchor-nav" role="navigation" id="navigation" style="visibility: inherit; opacity: 1;">
    <ul class="dotstyle">
      <li class="section01 webfont-plus" id="anchor1">
        <a href="#">
<span class="nav-head titleone" > 


<h1>The industry today</h1><h3 class="bl">Digital innovation at pace</h3></span></a></li>
      <li class="section02 webfont-plus" id="anchor2">
        <a href="#">
<span class="nav-head titletwo" > 


<h1>Becoming an
intelligent enterprise</h1><h3 class="bl">Preparing the business for future possibilities</h3></span></a></li>
      <li class="section03 webfont-plus" id="anchor3">
        <a href="#">
<span class="nav-head titlethree"> 


<h1>Augmenting upstream</h1><h3 class="bl">Incredible business benefits at your fingertips</h3></span></a></li>
      <li class="section04 webfont-plus" id="anchor4">
        <a href="#" class="">
<span class="nav-head titlefour" > 


<h1>Next-generation
business processes</h1><h3 class="bl">The opportunity to explore technology</h3></span></a></li>
      <li class="section05 webfont-plus" id="anchor5">
        <a href="#">
<span class="nav-head titlefive" > 


<h1>The changing
work force</h1><h3 class="bl">Navigating a complex ecosystem</h3></span></a></li>
      <li class="section06 webfont-plus" id="anchor6">
        <a href="#" class="">
<span class="nav-head titlesix" > 


<h1>Transform finance</h1><h3 class="bl">Modernize the backbone of the enterprise</h3></span></a></li>
      <li class="section07 webfont-plus" id="anchor7">
        <a href="#">
<span class="nav-head titleseven" > 


<h1>Retail expansion, not
increased complexity</h1><h3 class="bl">Maintain efficiency as you grow</h3></span></a></li>
      <li class="section08 webfont-plus" id="anchor8">
        <a href="#">
<span class="nav-head titleeight" > 


<h1>SAP solutions
for Oil and Gas</h1><h3 class="bl">Paving the way for an infinite loop
of innovation</h3></span></a></li>

    </ul>

  </nav>

</div>

Answer 1

没有理由为此使用 javascript。只需使用 HTML 和 CSS 即可完成。

只需将工具提示作为一个组件即可，例如:

<div class="tooltip">
    <span class="dot"></span>
    <div class="content">
        <h1>Tooltip heading</h1>
        <p>Some random text blah blah...</p>
    </div>
</div>

所以你有一个工具提示，其中包含它需要的一切:点和它旁边的内容。

Example jfiddle

---

编辑:

要跟随鼠标，获取父元素的偏移量，从鼠标位置中减去它就可以了。

var offset = $target.parentElement.getBoundingClientRect();
$target.style.top = (e.clientY - offset.top) + 'px';
$target.style.left = (e.clientX - offset.left) + 'px';

这是一个示例 jfiddle