Develop Reference

How do I make each link show its own text on the background when hovering?

I have 3 links when hovering over which I want a certain text to appear in the background. That is, when I hover the mouse cursor over "Works", "Works" appears in the background, when I hover over "About", "About" appears in the background. I don't understand how to do this if I add a second text, they climb on top of each other.
I attach my code below (You need to open the whole page to see the result).
I will be grateful if you help
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text{
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover{
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
<div class="info__black-hover"></div>
</ul>
</section>

You could perhaps use pseudo ::before elements with attr() function as the css content value...
content: attr(data-text);
Data attribute then set in the .info__link anchor tag...
<a class="info__link" href="#" data-text="Works">Works</a>
Could do with some refining but the method uses less markup.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/714rpkw8/1/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 50%;
bottom: 50%;
transition: all .5s ease;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
background: #1c1c1c;
overflow: hidden;
z-index: -10;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Another option, is you can use :has(), tho not fully supported by all browsers yet.
See :has() compatibility https://caniuse.com/?search=has
Using :has() in this example below runs the background transition effect behind all the before elems using attr() to render the data-text attribute value.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/y9164hxz/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 60px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Let me know if this works or you need more refinement.
Update
I like your site design, but those effects you got on your text would be tricky to do using my pseudo element pure css version.
The closest I could get to your current design using pure CSS and pseudo elements was like this...
See fiddle version here... https://jsfiddle.net/joshmoto/d8rf93mp/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 70px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
bottom: 0%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
vertical-align: baseline;
line-height: 150px;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
text-align: center;
transform: skewY(45deg);
transform-origin: 0% 0%;
}
.info__link:hover::before {
top: 0;
bottom: 0;
transform: skewY(0deg);
}
.info__link>SPAN {
display: block;
overflow: hidden;
position: relative;
}
.info__link>SPAN::before {
content: attr(data-text);
display: block;
position: relative;
transform: translateY(0%);
transition: all .5s ease;
transform-origin: 100% 100%;
}
.info__link:hover>SPAN::before {
transform: translateY(-100%) skewY(45deg);
}
.info__link>SPAN::after {
content: attr(data-text);
display: block;
position: absolute;
width: 100%;
top: 100%;
transition: all .5s ease;
transform: skewY(45deg);
transform-origin: 0 0;
}
.info__link:hover>SPAN::after {
top: 0;
transform: skewY(0);
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">
<span data-text="Works"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">
<span data-text="About"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">
<span data-text="Contact"></span>
</a>
</li>
</ul>
</section>

Try this, I think it will be much better and simple:
CSS
section {
display: flex;
position: relative;
justify-content: space-between;
transition: .3s;
font-family:sans-serif;
background: #eee;
}
section:hover {
background: black;
}
section:hover a{
color: white;
}
section a {
width: 33%;
text-decoration: none;
font-size: 30px;
color: black;
height: 400px;
display: flex;
padding-top: 100px;
justify-content: center;
}
section .background_text {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
color: white;
align-items: center;
justify-content: center;
font-size: 100px;
pointer-events: none;
transform: translateY(100px);
opacity: 0;
transition: .3s;
}
section .background_text.active {
transform: translateY(0);
opacity: 1;
}
JAVASCRIPT
let background_text = document.querySelector('.background_text');
let links = document.querySelectorAll('a.link');
links.forEach( e => {
e.onmouseover = function () {
background_text.classList.add('active');
background_text.textContent = e.textContent;
}
e.onmouseleave = function () {
background_text.classList.remove('active');
}
});
HTML
<section>
<div class="background_text"></div>
Works
About
Contact
</section>

Making yur HTML into 'legal' code, by putting the divs holding the larger text into the li elements instead of separately, we then alter the hover state CSS so that it is the child of the hovered element that is being transformed (not a sibling as in the original).
This snippet has just those changes:
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover .info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover .info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
</li>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
</li>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a>
<div class="info__black-hover"></div>
</li>
</ul>
</section>
There are other things you may want to look at. For example, would the user of first-character be helpful instead of a separate span element in the text of the large words. Also, what exactly you want the effect on the Contact element when hovered to be. At the moment just a black rectangle appears.

You can use data-attribute and access it in ::before or ::afetr css's content property. for more info visit this.
Below we are accessing data-linkfor value and displaying it in background.
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__text:hover .info__link {
color: #fff;
}
.info__link:hover {
color: white;
}
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
<section class="info">
<ul class="info__container">
<li data-linkfor="Works" class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<li data-linkfor="About" class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<li data-linkfor="Contact" class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
</ul>
</section>

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

Javascript Text following the cursor on mouseover

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>

There is no reason to use javascript for that. It can be accomplished simply using HTML and CSS.
Just make a tooltip as one component, eg:
<div class="tooltip">
<span class="dot"></span>
<div class="content">
<h1>Tooltip heading</h1>
<p>Some random text blah blah...</p>
</div>
</div>
So you have tooltip which contains everything it needs: dot and it's contents just right next to it.
Example jfiddle
Edit:
To follow the mouse, get offset of the parent element, subtract it from mouse location and that should do it.
var offset = $target.parentElement.getBoundingClientRect();
$target.style.top = (e.clientY - offset.top) + 'px';
$target.style.left = (e.clientX - offset.left) + 'px';
Here's an example jfiddle

MenuBar problems showing css html

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.
<!--JavaScript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
});
function toggleMenu(x) {
x.classList.toggle('openMenu');
}
</script>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/*Menu Bar*/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
}
nav .logo {
display: inline-block;
width: 25%;
padding: 0 5px;
line-height: 80px;
font-size: 24px;
transition: all 0.3s;
text-align: center;
}
nav.black .logo {
color: #fff;
}
nav a {
display: inline-block;
width: 12.5%;
line-height: 80px;
color: #151515;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
text-align: center;
vertical-align: top;
}
nav.black a {
color: #fefefe;
}
nav a:focus {
outline: none;
}
nav a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(img/lol.jpg);
background-size: cover;
background-position: center;
}
/* Hamburger icon */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
width: 35px;
height: 5px;
background-color: #fefefe;
margin: 6px 0;
transition: all 0.4s;
}
.openMenu .hamburger .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.openMenu .hamburger .bar2 {
opacity: 0;
}
.openMenu .hamburger .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*Media*/
#media(max-width: 860px) {
nav {
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
color: #fefefe;
overflow: hidden;
}
.logo {
position: fixed;
top: 0;
}
nav a {
width: 100%;
line-height: calc((100vh - 80px) / 6);
transform: translateY(80px);
visibility: hidden;
}
.openMenu a {
color: #fefefe;
visibility: visible;
}
.hamburger {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.openMenu {
height: 100vh;
}
.slider {
width: 100%;
height: 23%;
}
section.sec1 {
width: 100%;
height: 30%;
}
article#video{
width: 100%;
}
video{
width: 100%;
}
aside{
border-bottom:#e8491d 3px solid;
width: 100%;
height: 250px;
}
aside#welcometext{
font-family: cursive;
width: 100%;
height: 76%;
}
aside#New{
font-family: serif;
height: 100%;
width: 100%;
}
}
/*Slideshow*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider {
overflow: hidden;
height: 450px%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slidy infinite;
}
#keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12% {
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
}
/*Welcome*/
article{
float: left;
margin: 0 auto;
width: 23%;
height: auto;
}
#welcometext{
float: right:
margin: 0 auto;
width: 100%;
height: auto;
border-bottom:#e8491d 3px solid;
height: 38%;
}
#News1{
margin-left: 5%;
width: 52%;
height: 7%;
display: inline-flex;
}
section.News{
border-bottom:#e8491d 3px solid;
height: 100%;
}
aside#New{
padding: 27%;
height: 100%;
width: 100%;
font-family: cursive;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title> Landschaft </title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--Body-->
<body>
<div class="wrapper">
<nav>
<div class="hamburger" onclick="toggleMenu(this.parentNode);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
><a href="about.html">СЪБИТИЯ</a
><a href="index.html">ПЪТЕКИ</a
><a href="index.html">ФОРУМ</a
><a href="index.html">ВРЪЗКИ</a
><a class="active" href="index.html">ВХОД</a>
</nav>
<!--Section - Slideshow-->
<section class="sec1"></section>
<section class="content">
<div class="slider">
<figure>
<div class="slide">
<img src="img/slideshow1.jpg">
</div>
<div class="slide">
<img src="img/slideshow2.jpg">
</div>
<div class="slide">
<img src="img/slideshow3.jpg">
</div>
<div class="slide">
<img src="img/slideshow4.jpg">
</div>
<div class="slide">
<img src="img/slideshow5.jpg">
</div>
</figure>
</div>
</section>
<!--Section Welcome Video-->
<section class="Welcome">
<article id="video">
<video width="295" height="238" controls autopl>
<source src="video.mp4" type="video/mp4">
</video>
</article>
<aside id="welcometext">
<h2><center>Welcome</center></h2>
<center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
</aside>
</section>
<!--Section News-->
<section class="News">
<article id="News1">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
</article>
<aside id="New">
<p> dsadas das </p>
</aside>
</section>
</div>
</body>
</html>

Adding a z-index rule to your nav element solved the problem on my end.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
z-index: 100;
}
Here is a little read on the subject

Give your header/nav a z-index:
nav {z-index:100}
Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.