I’m currently working on an animation, and I’ve hit a snag. None of my attempts seem to be working. Here’s what I’m trying to achieve:
When the user hovers over the added-value-cont, the exit button (exit-btn) should appear.
Here’s the code I have so far:
HTML
<div class="added-value-cont">
<p id="exit-btn" class="exit-btn-hidden">X</p>
<div class="added-value">
<p class="value added-value-element">0.00 €</p>
<p class="amount added-value-element">0 Stk</p>
<p class="coin-value added-value-element">(CV: 0.00)</p>
<p class="gramms added-value-element">(G: 0g)</p>
</div>
</div>
CSS
.added-value-cont, .added-value {
display: flex;
flex-direction: row;
gap: 5px;
}
.added-value-cont {
background-color: #202020;
border-left: 5px solid grey;
padding-left: 5px;
}
.added-value-cont:hover {
filter: brightness(1.2);
}
.exit-btn-hidden {
display: none;
background-color: darkred;
padding: 5px 10px;
text-align: center;
}
.exit-btn {
display: block;
background-color: darkred;
padding: 5px 10px;
text-align: center;
}
.exit-btn:hover {
background-color: red;
}
.added-value-element {
border: 1px solid transparent;
padding: 5px;
}
.added-value-element:hover {
border: 1px solid grey;
}
JavaScript
function showExitBtn(added_value_cont, state){
if (state === "show"){
const exit_btn = added_value_cont.querySelector(".exit-btn-hidden");
exit_btn.classList.remove("exit-btn-hidden");
exit_btn.classList.add("exit-btn");
} else if (state === "hide"){
const exit_btn = added_value_cont.querySelector(".exit-btn");
exit_btn.classList.remove("exit-btn");
exit_btn.classList.add("exit-btn-hidden");
}
}
const added_value_conts = document.getElementsByClassName("added-value-cont");
Array.from(added_value_conts).forEach(function(element) {
element.addEventListener("mouseenter", function() {
showExitBtn(this, "show");
});
element.addEventListener("mouseleave", function(){
showExitBtn(this, "hide");
});
});
And can someone please explain to me how to bypass this annoying blockade? I had a problem when creating this post because I kept getting the following message: ‘It looks like your post is mostly code; please add some more details.’ But since I’ve already described everything so far, it really bothered me.
I appreciate any help you can provide. Thanks in advance!
Unknown Engine is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.