不再悬停时保持css悬停效果

<div class="hover-effect">Hover me</div>

.hover-effect {
  /* 正常状态样式 */
}

.hover-effect:hover {
  /* 悬停状态样式 */
}

.hover-effect.active {
  /* 悬停状态样式 */
}

const hoverElement = document.querySelector('.hover-effect');

hoverElement.addEventListener('mouseout', function() {
  hoverElement.classList.remove('active');
});

hoverElement.addEventListener('mouseover', function() {
  hoverElement.classList.add('active');
});

<div class="hover-effect">Hover me</div>

.hover-effect {
  /* 正常状态样式 */
  animation-name: normalState;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.hover-effect:hover {
  /* 悬停状态样式 */
  animation-name: hoverState;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes normalState {
  from {
    /* 正常状态样式 */
  }
  to {
    /* 正常状态样式 */
  }
}

@keyframes hoverState {
  from {
    /* 悬停状态样式 */
  }
  to {
    /* 悬停状态样式 */
  }
}