I dont know how but my hover in left arrow (#left) stop work suddenly. I dont change any line of code in css which can create this issue. I just change the some lines in js and when I start site in codepen it didin't work. (the right one works fine ;D)
code:
HTML
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin Sans&display=swap" rel="stylesheet">
<link rel=”stylesheet” href=”text/style.css”>
</head>
<body>
<div >
<div id="left">
<svg viewBox="0 0 256 512" width="50" title="angle-left">
<path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
</svg>
</div>
<div id="slides">
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide3"></div>
</div>
<ul >
<li id="slide_pointer1"></li>
<li id="slide_pointer2"></li>
<li id="slide_pointer3"></li>
</ul>
<div id="right" >
<svg viewBox="0 0 256 512" width="50" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #000;
}
.container
{
display: flex;
width: 1000px;
height: 500px;
border-radius: 25px;
margin: auto;
margin-top: 10%;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
}
#slides
{
width: 600px;
height: 300px;
margin-top: -100px;
position: absolute;
padding: 100px;
}
.slide_pointers
{
width: 800px;
height: 50px;
position: relative;
margin-top: 400px;
margin-left: 70px;
}
.slide_pointers > li
{
float: left;
list-style-type: none;
height: 10px;
width: 100px;
background-color: #9c9c9c;
margin-left: 80px;
margin-top: 40px;
border-radius: 25px;
}
#destription
{
font-size: 30px;
}
#right
{
right: -60px;
}
#right:hover
{
opacity: 0.7;
}
#left
{
margin-right: 40px;
}
#left : hover
{
opacity: 0.7;
}
JS
var slide1 = {
object: document.querySelector("#slide1"),
name: "WORK",
destription: "I'm programing since I have 7 years old. I started with html, c . Then I findout python and I can say that i love this language. I learned some c# for making games in unity. I use lua for LOVE engine to also making games. Now I endup with JS/HTML/CSS to be the greatest, youngest frontend developer.",
active: true,
color: "#751BB5",
};
var slide2 = {
object: document.querySelector("#slide2"),
name: "LEARNING",
destription: "Before I end primmary school I have course where we do robots and we programmmed they in C and Python. We won some tournamets (First and Seccound place's).",
active: false,
color: "#14cba8",
};
var slide3 = {
object: document.querySelector("#slide3"),
name: "PASSION",
destription: "Since I have started learning programing my only reason to started it was dream to create something big. Something that anyone will remember for years. And this dream pushes me to learn more.",
active: false,
color: "#7ecb20",
};
var slide_pointer1 = {
object: document.querySelector("#slide_pointer1"),
};
var slide_pointer2 = {
object: document.querySelector("#slide_pointer2"),
};
var slide_pointer3 = {
object: document.querySelector("#slide_pointer3"),
};
var buttonLeft = document.querySelector("#right");
var buttonRight = document.querySelector("#left");
var container = document.querySelector(".container");
let slides = [slide1, slide2, slide3];
let slide_pointers = [slide_pointer1, slide_pointer3, slide_pointer2]
Refresh();
buttonRight.onclick = function WaitForClickRight()
{
for(let i = 0; i<3; i )
{
if(slides[i].active)
{
if(i 1 == 3)
{
slides[0].active = true;
slides[i].active = false;
}
else
{
slides[i 1].active = true;
slides[i].active = false;
}
Refresh();
break;
}
}
}
buttonLeft.onclick = function WaitForClickLeft()
{
for(let i = 0; i<3; i )
{
if(slides[i].active)
{
if(i - 1 == -1)
{
slides[i].active = false;
slides[2].active = true;
}
else
{
slides[i].active = false;
slides[i-1].active = true;
}
Refresh();
break;
}
}
}
function Refresh()
{
for(let i = 0; i<3; i )
{
if(slides[i].active == true)
{
slides[i].object.innerHTML = "<h1>" slides[i].name "</h1> <br> <p id='destription'>" slides[i].destription "</p>";
container.style.backgroundColor = slides[i].color;
slide_pointers[i].object.style.backgroundColor = "#484848";
}
else
{
slides[i].object.innerHTML = "";
slide_pointers[i].object.style.backgroundColor = "#9c9c9c";
}
}
}
and codepen: https://codepen.io/pawe-wojas/pen/NWYygWp
CodePudding user response：
In the codepen, you had #left.hover instead of #left:hover
I changed the CSS to the below and it worked for me.
body
{
background-color: #000;
}
.container
{
display: flex;
width: 1000px;
height: 500px;
border-radius: 25px;
margin: auto;
margin-top: 10%;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
}
#slides
{
width: 600px;
height: 300px;
margin-top: -100px;
margin-left: 100px;
position: absolute;
padding: 100px;
}
.slide_pointers
{
width: 800px;
height: 50px;
position: relative;
margin-top: 400px;
margin-left: 70px;
}
.slide_pointers > li
{
float: left;
list-style-type: none;
height: 10px;
width: 100px;
background-color: #9c9c9c;
margin-left: 80px;
margin-top: 40px;
border-radius: 25px;
}
#destription
{
font-size: 30px;
}
#right
{
right: -60px;
}
#right:hover
{
opacity: 0.7;
}
#left
{
margin-right: 40px;
}
#left:hover
{
opacity: 0.7;
}
CodePudding user response：
your content in slide is overlay left arrow it will work when you try to add "margin-left:100px;" on slides class