Question

The task is: when I hover the pin with the cursor the text should follow the mouse. Unfortunately the position of the text is not correct. Is quite offset. It should be next to the pin.

How can I calculate the position in a better way?

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

Javascript Text following the cursor on mouseover

1 个答案: