如何使悬停操作图标在Jquery中可点击？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<i id="hover-icon" class="fas fa-star"></i>

$(document).ready(function() {
  $("#hover-icon").hover(function() {
    // 在悬停时添加样式或执行其他操作
    $(this).addClass("hovered");
  }, function() {
    // 当鼠标离开时移除样式或执行其他操作
    $(this).removeClass("hovered");
  }).click(function() {
    // 点击事件处理逻辑
    alert("图标被点击了！");
  });
});

.hovered {
  color: red;
  cursor: pointer;
}