We Keep Coding

Change Body Color on a CSS Style as Div

I'm new to HTML and CSS (student) and I'm running into an issue here.
I want to change the body background color when clicking on an element having a CSS Animation. Is it possible? Thanks!
I tried to set the Rocket as a Button, But it only changed the Rockets Color. I want to make it Change the background color for the Body.
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 5s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button class="rocket"></button>
<div class="window"></div>
</div>

To do this, you need to know JavaScript. Take this sample code and try to do more yourself.
const rocket = document.getElementById("rocket")
rocket.addEventListener('click', (e) => {
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style = `background: radial-gradient(circle at bottom, #${randomColor} 0, black 100%);`
})
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.orbit {
height: 450px;
width: 650px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 500px;
bottom: 300px;
animation: spin 10s infinite linear;
}
#keyframes spin {
100% {
transform: rotate(360deg)
}
}
.rocket {
background-color: #fafcf7;
height: 50px;
width: 25px;
border-radius: 50% 50% 0 0;
position: relative;
left: 11px;
top: 115px;
cursor: pointer;
}
.rocket:before {
position: absolute;
content: "";
background-color: #39beff;
height: 20px;
width: 55px;
z-index: -1;
border-radius: 50% 50% 0 0;
right: -15px;
bottom: 0;
}
.rocket:after {
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -4px;
left: 4.3px;
}
.window {
position: relative;
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
top: 15px;
left: 5px;
}
<div class="orbit">
<button id="rocket" class="rocket"></button>
<div class="window"></div>
</div>

How can I change color of the heart-button after click? [duplicate]

This question already has answers here:
Change color of an anchor when clicked
(4 answers)
Closed 2 years ago.
You can see in my code below I used pseudo-elements and actually that's why I got confused. Any idea how can I change color after click on button?
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>

Use currentColor as the background-color for all elements. Set the color of .heart to red, and set it to black when it's focused or active:
.heart {
color: red;
background-color: currentColor;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart::before,
.heart::after {
content: "";
background-color: currentColor;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart:focus {
color: black;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>
If you want the color change to remain even after you click somewhere else, and you would like to toggle the color on click, you might want to use a checkbox with label instead:
.heart {
color: red;
background-color: currentColor;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%;
top: 45%;
width: 50px;
}
.heart-checkbox {
display: none;
}
.heart::before,
.heart::after {
content: "";
background-color: currentColor;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart-checkbox:checked + .heart {
color: black;
}
<div class="wrapper">
<input type="checkbox" class="heart-checkbox" id="heart-checkbox">
<label class="heart" for="heart-checkbox"></label>
</div>

If it's only when you click on it, you can use the active state (see example code below):
.heart:active, .heart:active:before, .heart:active:after {
background-color: black;
}
If you want to change color while the element is in focus, focus state:
.heart:focus, .heart:focus:before, .heart:focus:after {
background-color: black;
}
If you want to change it "permenantly", you can use JavaScript to add a class to the element (with the desired colors declared in CSS).
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
.heart:active, .heart:active:before, .heart:active:after {
background-color: black;
}
<div class="wrapper">
<a class="heart" href="#"></a>
</div>

You can use two images red and white for example. and you can also use javascript.
html
<div class="wrapper">
<a class="a-heart" href="#"><img src="redHeart.png" id="heart" class="red"></a>
</div>
javascript
let heart = document.getElementById('heart');
heart.addEventListener('click',()=>{
if(heart.classList.contains('red')){
heart.classList.remove('red');
heart.classList.add('white');
heart.src = 'whiteHeart.png';
}else{
heart.classList.remove('white');
heart.classList.add('red');
heart.src = 'redHeart.png';
}
});

How can I fade text in using JavaScript with button

I have a function for the button already but I can't figure out what I need to add to make it fade in
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Do I need to make a new function or can I add it to my existing one?
Here is my CSS
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
You can see the whole code here.

Your problem is you are removing the transition, so it causes it to not transition, but just jump. Leave the transition on the whole time, and just change the opacity:
const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
target.classList.contains('fade')
? target.classList.remove('fade')
: target.classList.add('fade');
});
#target {
transition: 1s opacity;
opacity: 1;
width: 100px;
height: 50px;
background: #F00;
}
#target.fade {
opacity: 0;
}
<div id="target"></div>
<button>Toggle</button>

Use fadeIn() and fadeOut() functions as given below.
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
$("#myDIV").fadeIn();
} else {
$("#myDIV").fadeOut();
}
}
.button-holder {
position: absolute;
margin: auto;
height: 25px;
top: 260px;
left: 0;
width:100%;
text-align: center;
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
</body>
</html>

it is possible playing with css animations, adding css classes and removing them.
function fadeOut() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeIn');
myElement.classList.add('fadeOut');
}
function fadeIn() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeOut');
myElement.classList.add('fadeIn');
}
#myElement{
width: 100px;
height: 100px;
background: red;
}
.fadeOut{
-webkit-animation: fadeOut 1.0s forwards;
}
.fadeIn{
-webkit-animation: fadeIn 1.0s forwards;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="myElement">
</div>
<button onclick="fadeOut()">
Hide
</button>
<button onclick="fadeIn()">
Show
</button>

Javascript dot navigation not working

I am quite new to coding and I am trying to implement a dot navigation bar. Below is my code.
<html>
<head>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
/* Init */
html { width: 100%; height: 100%; }
body {
position: relative;
width: 100%; height: 100%;
background: #EA7E00;
}
.dot-nav {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Fin Init */
.dot-nav--item {
position: relative;
display: block;
width: 16px; height: 16px;
margin-bottom: 28px;
border: 3px solid #fff;
border-radius: 50%;
&:before, &:after { content: ""; }
&:before {
position: absolute;
top: -1px; bottom: -1px; left: -1px; right: -1px;
transform: scale(0);
opacity: 0;
border-radius: 50%;
background-color: #fff;
transition: all .3s;
}
&:after {
display: block;
width: 3px; height: 30px;
margin: 13px auto 0;
background-color: #fff;
}
&:last-child:after { display:none; }
&:hover { cursor: pointer; }
&.is-active:before {
opacity: 1;
transform: scale(1);
}
}
.dot-nav--link {
position: absolute;
top: 50%;
visibility: hidden;
transform: translate(-120%, -50%);
width: 200px;
padding: 5px 10px;
opacity: 0;
color: #111; background-color: #fff;
transition: all .3s;
&:before {
content: "";
position: absolute;
top: 50%; left: 100%;
width: 0; height: 0;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #fff;
border-style: solid;
transform: translateY(-50%);
}
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
}
</style>
<script type="text/javascript">
$('.dot-nav--item').on('click', function(){
$this = $(this),
$siblings = $this.siblings();
$this.addClass('is-active');
$siblings.removeClass('is-active');
})
</script>
</head>
<body><nav class="dot-nav">
<ul class="dot-nav--list list-unstyled">
<li class="dot-nav--item is-active">Lorem ipsum dolor.</li>
<li class="dot-nav--item">Assumenda, officia omnis.</li>
<li class="dot-nav--item">Sed, alias totam.</li>
<li class="dot-nav--item">Officia, itaque, vitae!</li>
<li class="dot-nav--item">Repellendus, veritatis, deserunt.</li>
</ul>
</nav>
</body>
</html>
The dots do not seem to be showing content when I hover over it and does not fill when I click on it either. I can't seem to find what is wrong. I suspect it has something to do with the script source but I am not so sure. Do you have any suggestions?

You have added the visible styles in a wrong place. Look at the following syntax
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
The above style you have added under the class .dot-nav--link. This is wrong. It should be like below and you have to place after the .dot-nav--links declarations.
.dot-nav--item:hover .dot-nav--link {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
So whenever you hover the items it will try to find the child with the class .dot-nav--link and make it visible. Not sure what you are trying to achieve through jquery code.
FIDDLE DEMO

CSS Drawing a line between two elements

I've been trying to draw a line down the middle of a series of circles however if I set a line (.Line1) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. If i set a line (.Line2) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around.
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements.
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe

You need to take border, width and height into account. you cannot draw half a pixel. For example this is a center line:
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}

give one of the lines a margin-left that will be equal to half of the circle's width.
that way the line will always stay in the middle no matter if you zoom in or out.
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}

You need to wrap your circles into a parent Element. So that you can align the Black line according to the parent Div and not the window size.
Moreover you can use the pseudo selector :before or :after for the line.
HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
Checkout this pen