Мигает элемент с правилом `: hover` CSS после падения файла на него

Question

У меня есть область размещения файлов, которая имеет background-color: red. Эта область меняет background-color на gray на :hover, а когда она имеет класс drop-over, я добавляю событие dragenter и удаляю событие drop.

Когда я опускаю Файл, который я вижу красным, мигает в этой области (.drop-over удалено, но :hover CSS правило еще не применено).

Как исправить это с помощью CSS?

label.addEventListener("drop", event => {
    event.preventDefault();
    label.classList.remove("drop-over");
    console.log(event.dataTransfer.files);
});

label.addEventListener("dragenter", event => {
    label.classList.add("drop-over");
});

label.addEventListener("dragleave", event => {
    label.classList.remove("drop-over");
});

label.addEventListener("dragover", event => {
    event.preventDefault();
});

#file-input {
    display: none;
}

label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: red;
}

label:hover, label.drop-over {
    background-color: gray;
}

<div class="wrapper">
    <input id="file-input" type="file">
    <label id="label" for="file-input">
    Drop Here
</label>
</div>

Answer 1

Вопрос был в том, как это исправить с помощью CSS, а я до сих пор не знаю, как.

Но если вам нужно какое-либо решение, то это можно сделать с помощью JS.

* 1004. * Заменить внутри drop слушателя:

label.classList.remove("drop-over");

на:

setTimeout(_ => label.classList.remove("drop-over"), 50);