How to stop an event after it has reached its final state

Question

I’m making an animation for a portfolio site, and I’m trying to apply an event with javascript, and I wanted that after the event took place once, it paused completely, but n know how to do this, until then what I got was mouseover, but it ends up repeating itself every time I move the mouse

document.getElementById("SobreMim").onmouseover = function() {mouseOver()};

function mouseOver() {
    let option = {
        size: 160,
        value: 0.90,
        fill:{color:"#ee0505"}
    }
    $(".card .bar").circleProgress(option).on('circle-animation-progress',
    function(e, progress, stepValue){
        $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
    });
    $(".css .bar").circleProgress({
        value:0.85,
    });
    $(".js .bar").circleProgress({
        value:0.60,
    });
};

#skillBlock{
  display: flex;
  align-items: center;
  width: 45vw;
  max-width: 650px;
  justify-content: space-between;
  margin: 0px 0px 0px 20px;
}
.card{
  width: 200px;
  height:225px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.bar{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.bar img{
  position: absolute;
  width: 80px;
  top:20px;
}
.bar span{
  font-family: "Fugaz One";
  font-size: 1.8em;
  color: #fff;
  margin-top: 15px;
}

<div id="skillBlock">
                <div class="card">
                    <div class="bar"><img src="Imgs_Site/html.png"><span></span></div>
                </div>
                <div class="card css">
                    <div class="bar"><img src="Imgs_Site/css.png"><span></span></div>
                </div>
                <div class="card js">
                    <div class="bar"><img src="Imgs_Site/js.png"><span></span></div>
                </div>
            </div>