如何在下拉选择中添加悬停？

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

#dropdown {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

.hover {
  background-color: #f5f5f5;
}

var dropdown = document.getElementById("dropdown");

dropdown.addEventListener("mouseover", function(event) {
  event.target.classList.add("hover");
});

dropdown.addEventListener("mouseout", function(event) {
  event.target.classList.remove("hover");
});