当鼠标悬停在列表下拉列表上时旋转图像，当鼠标悬停在列表下拉列表上时旋转回来

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

#dropdown {
  width: 200px;
  height: 30px;
}

#dropdown:hover img {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

#dropdown img {
  width: 20px;
  height: 20px;
  transition: transform 0.5s ease;
}

var dropdown = document.getElementById("dropdown");
var image = dropdown.getElementsByTagName("img")[0];

dropdown.addEventListener("mouseenter", function() {
  image.classList.add("rotate");
});

dropdown.addEventListener("mouseleave", function() {
  image.classList.remove("rotate");
});