如何在搜索框被聚焦时禁用悬停效果？

<input type="text" id="searchBox" placeholder="搜索框">

/* 悬停效果 */
#searchBox:hover {
  background-color: #ccc;
}

/* 禁用悬停效果 */
#searchBox.noHover {
  background-color: #fff;
}

// 获取搜索框元素
var searchBox = document.getElementById("searchBox");

// 监听搜索框的聚焦事件
searchBox.addEventListener("focus", function() {
  // 禁用悬停效果
  searchBox.classList.add("noHover");
});

// 监听搜索框的失去焦点事件
searchBox.addEventListener("blur", function() {
  // 恢复悬停效果
  searchBox.classList.remove("noHover");
});