title: Skipping hover animation while reloading HTML and hovering on a element
body: <h3>Context:</h3>
  <p>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 <em><strong>reloads the partial view</strong></em> on success.</p>
  <hr />
  <h3>The Problem:</h3>
  <p>I have a CSS rule which expands the toggle button while hovering over a specific todo item:</p>
  <pre class="lang-css prettyprint-override"><code>.todoitem .toggle-button {
      width: 10px;
      transition-duration: 0.3s;
  }
  
  .todoitem:hover .toggle-button {
      width: 60px;
  }
  </code></pre>
  <p>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:</p>
  <p><img src="https://i.stack.imgur.com/Vfd1r.gif" alt="enter image description here" /></p>
  <p>What I want is for the toggle button to stay expanded upon reloading the partial view.</p>
  <hr />
  <h3>What I tried:</h3>
  <p>My initial guess for where this problem came from was that the page initially loads and displays in the &quot;default&quot; state, before the styles for <code>hover</code> 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 <code>loaded-while-hovered</code> 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 <code>not(:hovered)</code>. The code then looked something like this:</p>
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  <p>This however, again did not work as expected and produced exactly the same effect.</p>
  <p>What causes this and what can I do against it? Can it be done without JavaScript? (JS is fine though)</p>