如何使用 JQuery 实现点击和悬停时更改 li 元素的样式，并保持默认选中第一个 li 状态？

.ser_box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.ser_header {
  width: 100%;
  height: 90px;
}

.ser_headc {
  width: 85%;
  height: 90px;
  margin: 0 auto;
}

.ser_left {
  width: 20%;
  height: 90px;
  float: left;
}

.ser_center {
  width: 60%;
  height: 90px;
  float: left;
  border-bottom: 1px solid #c4dbed;
}

.ser_right {
  width: 19%;
  height: 90px;
  float: left;
  text-align: right;
  font-size: 12px;
}

.ser_menu {
  width: 20px;
  vertical-align: middle;
}

.ser_text {
  vertical-align: middle;
}

.ser_ul {
  list-style: none;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

.ser_ul li {
  float: left;
  height: 40px;
  line-height: 40px;
  border: 1px solid #c4dbed;
  border-bottom: none;
  text-align: center;
}

.ser_li {
  width: 12%;
}

.ser_li_speical {
  width: 14%;
}

.ser_focus {
  background-color: #557fb9;
}

$(function() {
  $(".ser_ul li").first().addClass("ser_focus"); // 默认选中第一个 li

  // 点击 li 时更改样式
  $(".ser_ul li").click(function() {
    $(".ser_ul li").removeClass("ser_focus"); // 移除所有 li 的选中状态
    $(this).addClass("ser_focus"); // 为被点击的 li 添加选中状态
  });

  // 鼠标悬停在 li 上时更改样式
  $(".ser_ul li").hover(function() {
    $(this).addClass("ser_focus"); // 添加选中状态
  }, function() {
    $(this).removeClass("ser_focus"); // 移除选中状态
  });
});