如何为选择标签内的选项元素添加鼠标悬停事件？答案

【问题标题】：How to add mouseover event for an option element inside a select tag?如何为选择标签内的选项元素添加鼠标悬停事件？
【发布时间】：2020-06-24 05:26:38
【问题描述】：

如何为选择标签内的选项元素添加鼠标悬停事件？

它适用于带有多个选项选择的选择，但不支持带有单个选项选择的选择。这种行为有原因吗？

以下是要重现的示例： sample to see in action

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>

<select id="pet-select" multiple>
    <option value="">--Please choose an option--</option>
    <option onmouseover="console.log('hello1')" value="dog">Dog</option>
    <option onmouseover="console.log('hello1')" value="cat">Cat</option>
</select>
  </div>
    <div style="margin-top:30px">
  <select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option onmouseover="console.log('hello2')" value="dog">Dog</option>
    <option onmouseover="console.log('hello2')" value="cat">Cat</option>
</select>
    </div>

</body>
</html>

【问题讨论】：

有趣的问题。我认为这可能与浏览器以不同方式呈现选择下拉菜单的“弹出”性质有关。您是否尝试过为 w3schools.com/howto/howto_custom_select.asp 之类的选择字段构建自己的前端。通过使用伪元素作为下拉菜单，您也许可以从中获取悬停状态？

标签： javascript html web

【解决方案1】：

很抱歉，我不知道它的原因，但我可以帮助您找到解决方案。

我已将css 添加到pet-select > option 的id，然后将样式添加到onhover 事件：

所以代码如下：

#pet-select[multiple='multiple']>option:hover {
  background-color: blue !important;
  color: white !important;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      #pet-select[multiple='multiple']>option:hover {
        background-color: blue !important;
        color: white !important;
      }

    </style>
  </head>
  <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div><select id="pet-select" multiple="multiple">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
      </select></div>
    <div style="margin-top: 30px;"><select id="pet-select">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
      </select></div>

  </body>

</html>

【讨论】：

看来你误解了我的问题。我实际上正在寻找添加鼠标悬停事件（JS方式）而不是css相关状态，这对业务逻辑没有帮助（如javascript）。