如何在光标悬停时旋转图像并保持旋转？

<div id="image-container">
  <img src="image.jpg" alt="Image">
</div>

#image-container {
  width: 200px;
  height: 200px;
  position: relative;
  transition: transform 0.5s ease; /* 添加过渡效果，使旋转更平滑 */
}

#image-container img {
  width: 100%;
  height: 100%;
}

#image-container:hover {
  transform: rotate(360deg); /* 光标悬停时旋转360度 */
}

var imageContainer = document.getElementById('image-container');

imageContainer.addEventListener('mouseenter', function() {
  imageContainer.classList.add('rotate'); // 添加CSS类以触发旋转
});

imageContainer.addEventListener('mouseleave', function() {
  imageContainer.classList.remove('rotate'); // 移除CSS类以停止旋转
});