Hey folks!
I have a simple problem, but then maybe it’s not so simple
I have a button that I designed (.container-fluid
), that I want when pressed, to remove the LED glow from around another element (.circle
). I wrote up some javascript code for it, and the console is showing no errors, so I’m confused as to what the problem is. Thanks for your help in advance!
Here’s my current code:
// on mouse press
$(".container-fluid").mousedown(e => {
$(".circle").addClass("glow-off")
})
// on up (mouse release)
$(".container-fluid").mouseup(e => {
$(".circle").removeClass("glow-off")
})
Here is the corresponding HTML and CSS code snippets:
HTML:
<div class="container-fluid">
<div class="holder">
<div class="circle">
<div class="make-it">
</div>
<div class="vertical-rectangle">
</div>
</div>
</div>
</div>
CSS:
.container-fluid{
/*border: 1px solid green;*/
width:425px;
height: 425px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}
.container-fluid:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,1);
color: #000;
}
.holder{
/*border: 1px solid green;*/
width:370px;
height: 370px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.circle{
width:300px;
height: 300px;
border: 30px solid #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: relative;
}
.glow-off{
box-shadow: none;
}