任务是：当我将光标悬停在图钉上时，文本应跟随鼠标移动。不幸的是，文本的位置不正确。是相当抵消。它应该在引脚旁边。
如何以更好的方式计算位置？
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>没有理由为此使用 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>
所以你有工具提示，它包含它需要的一切：点和它的内容就在它旁边。
编辑：
要跟随鼠标，获取父元素的偏移量，从鼠标位置减去它，就可以了。
var offset = $target.parentElement.getBoundingClientRect();
$target.style.top = (e.clientY - offset.top) + 'px';
$target.style.left = (e.clientX - offset.left) + 'px';
这是一个示例jfiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句