如何在hover select元素时实现箭头旋转效果？

你当前的CSS选择器无效，核心原因是**~兄弟选择器只能选中当前元素之后的同级元素**，而你的.arrow元素在<select>的前面，所以select:hover ~ .arrow根本匹配不到箭头元素。此外，原生<select>的内部结构无法自定义，直接把箭头放进<select>里肯定不会显示，这个思路不可行。

下面给出两种可行的解决方案：

方案1：调整HTML结构，将箭头移到对应<select>后方 #

把.arrow放到你要关联的<select>后面，用兄弟选择器就能生效。同时建议给.options设置position: relative，避免箭头的绝对定位脱离预期容器：

修改后的HTML（以绑定第一个价格选择器为例） #

<div class="vip-section">
  <div class="text-options">
    <h2>V.I.P Announcement</h2>
    <div class="options">
      <input type="search" placeholder="Search..." name="" id="">
      <select>
        <option value="">Select price</option>
        <option value="">500$ - 1.500$</option>
        <option value="">1.500$ - 2.500$</option>
        <option value="">2.500$ - 5.000$</option>
        <option value="">5.000$ - 10.000$</option>
        <option value="">10.000$ - 20.000$</option>
      </select>
      <!-- 将箭头移到对应select后方 -->
      <div class="arrow">
        <img src="/Images/arrow-down-sign-to-navigate (1).png" alt="">
      </div>
      <select>
        <option value="">Select brand</option>
        <option value="">Mercedes</option>
        <option value="">BMW</option>
        <option value="">Audi</option>
        <option value="">Ferrari</option>
        <option value="">Chevrolet</option>
      </select>
    </div>
  </div>
</div>

修改后的CSS #

.vip-section .options {
  /* 新增：让箭头的绝对定位基于该容器 */
  position: relative;
}

.vip-section .options select {
  cursor: pointer;
  width: 160px;
  height: 40px;
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  font-size: 17px;
  border: .5px solid rgba(0, 0, 0, .5);
  color: rgba(0, 0, 0, .6);
  outline: none;
  border-radius: 20px;
  margin-right: 5px;
  padding-left: 18px;
  background-color: #E7E7E7;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.vip-section .options .arrow {
  position: absolute;
  /* 调整定位值，相对于.options容器 */
  top: 10px;
  left: calc(160px + 15px); /* 第一个select宽度+右边距+内边距，可按需调整 */
  width: 25px;
  height: 20px;
  /* 新增过渡，让旋转效果更顺滑 */
  transition: transform 0.3s ease;
}

/* 用+选择器匹配紧挨着的箭头兄弟元素 */
.vip-section .options select:hover + .arrow {
  transform: rotate(270deg);
}

方案2：不调整结构，使用CSS :has选择器（现代浏览器支持） #

如果不想改动HTML结构，可以用:has选择器，通过父容器.options检测内部的<select>是否被hover，再选中箭头：

修改后的CSS（仅调整最后一条规则，新增过渡和父容器定位） #

.vip-section .options {
  position: relative; /* 让箭头定位更可控 */
}

.vip-section .options select {
  cursor: pointer;
  width: 160px;
  height: 40px;
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  font-size: 17px;
  border: .5px solid rgba(0, 0, 0, .5);
  color: rgba(0, 0, 0, .6);
  outline: none;
  border-radius: 20px;
  margin-right: 5px;
  padding-left: 18px;
  background-color: #E7E7E7;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.vip-section .options .arrow {
  position: absolute;
  margin-top: 10px;
  margin-left: 370px;
  width: 25px;
  height: 20px;
  transition: transform 0.3s ease; /* 新增过渡效果 */
}

/* 通过父容器检测select的hover状态，选中箭头 */
.vip-section .options:has(select:hover) .arrow {
  transform: rotate(270deg);
}

如果只想让特定的<select>触发箭头旋转（比如仅价格选择器），可以给该<select>加类名（如class="price-select"），然后把选择器改成.vip-section .options:has(.price-select:hover) .arrow。

内容的提问来源于stack exchange，提问作者Strong