I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
