Customize hover effect for Bootstrap checkbox

Starting with this answer, I'm trying to avoid the hover effect on a Bootstrap checkbox that appears like a button:

<input type="checkbox" class="btn-check" id="btn-enable-cromo" autocomplete="off" checked>
<label class="btn btn-outline-success btn-sq-responsive" for="btn-enable-cromo"><img src="images/Cromo.svg" /></label>

in CSS:

.btn-check:hover,
.btn-sq-responsive:hover {
    color: transparent;
}

I need this because on both desktop or mobile environment, when you click (or tap) on the checkbox you don't see anything until you click (or tap) elsewhere. The hover color is identical to the checked one so you have no feedback about.

Instead my goal is to show the actual state of the checkbox immediately.

The code above changes nothing: the behavior is the same. I'm using the Bootstrap v5.1.3.