Skipping hover animation while reloading HTML and hovering on a element

Context:

I'm making a todo web application in ASP.NET Core MVC where I load the list of todos from an API using a partial view and AJAX. Each todo item has a button which toggles its done state by calling the API and reloads the partial view on success.

The Problem:

I have a CSS rule which expands the toggle button while hovering over a specific todo item:

.todoitem .toggle-button {
    width: 10px;
    transition-duration: 0.3s;
}

.todoitem:hover .toggle-button {
    width: 60px;
}

With this, when the toggle button is pressed and subsequently the partial view reloaded, the hover animation is being replayed which is not the awaited result. Here's how it looks like:

What I want is for the toggle button to stay expanded upon reloading the partial view.

What I tried:

My initial guess for where this problem came from was that the page initially loads and displays in the "default" state, before the styles for hover are processed. Thinking that, what I tried was passing in the clicked todo's ID as a parameter into the partial view and dynamically assigning a loaded-while-hovered class to the corresponding todo item while reloading. With this I could basically negate the hover and default styles and ensure that the page would load with the toggle button expanded and shrink it while the todo item is not(:hovered). The code then looked something like this:

.todoitem .toggle-button {
    width: 10px;
    transition-duration: 0.3s;
}

.todoitem:hover .toggle-button {
    width: 60px;
}

.todoitem.loaded-while-hovered .toggle-button {
    width: 60px;
}

.todoitem.loaded-while-hovered:not(:hover) .toggle-button {
    width: 10px;
}

This however, again did not work as expected and produced exactly the same effect.

What causes this and what can I do against it? Can it be done without JavaScript? (JS is fine though)