移出元素时保持悬停效果

.element:hover {
  /* 悬停样式 */
}

<div class="element" onmouseover="addHoverClass()" onmouseout="removeHoverClass()">元素</div>

<script>
function addHoverClass() {
  document.querySelector('.element').classList.add('hover');
}

function removeHoverClass() {
  document.querySelector('.element').classList.remove('hover');
}
</script>

<style>
.element.hover {
  /* 悬停样式 */
}
</style>

<div class="element">元素</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.element').hover(
  function() {
    $(this).addClass('hover');
  },
  function() {
    $(this).removeClass('hover');
  }
);
</script>

<style>
.element.hover {
  /* 悬停样式 */
}
</style>