Javascript 如何为select标记内的option元素添加鼠标悬停事件？_Javascript_Html_Web

Javascript 如何为select标记内的option元素添加鼠标悬停事件？

javascript html web

Javascript 如何为select标记内的option元素添加鼠标悬停事件？,javascript,html,web,Javascript,Html,Web,如何为select标记内的option元素添加鼠标悬停事件它适用于多选项选择，但不支持单选项选择。这种行为有什么原因吗下面是要复制的示例：很抱歉，我不知道原因，但我可以帮你找到解决办法我已将css添加到宠物选择>选项的id中，然后将样式添加到onhover事件：因此，代码如下所示：宠物选择[multiple='multiple']>选项：悬停{ 背景色：蓝色！重要；颜色：白色！重要； } 页面标题宠物选择[multiple='multiple']>选项：悬停{ 背景色：蓝色

如何为select标记内的option元素添加鼠标悬停事件

它适用于多选项选择，但不支持单选项选择。这种行为有什么原因吗

下面是要复制的示例：

很抱歉，我不知道原因，但我可以帮你找到解决办法

我已将css添加到宠物选择>选项的id中，然后将样式添加到onhover事件：

因此，代码如下所示：

宠物选择[multiple='multiple']>选项：悬停{ 背景色：蓝色！重要；颜色：白色！重要； } 页面标题宠物选择[multiple='multiple']>选项：悬停{ 背景色：蓝色！重要；颜色：白色！重要； }

-请选择一个选项- 狗猫 -请选择一个选项- 狗猫

很抱歉，我不知道原因，但我可以帮你找到解决办法

我已将css添加到宠物选择>选项的id中，然后将样式添加到onhover事件：

因此，代码如下所示：

-请选择一个选项- 狗猫 -请选择一个选项- 狗猫

有趣的问题。我认为这可能是因为浏览器呈现的select下拉列表的“弹出”特性不同。您是否尝试过在一个选定的字段上构建自己的前端，如。通过使用伪元素作为下拉列表，您可以从中获取悬停状态？这是一个有趣的问题。我认为这可能是因为浏览器呈现的select下拉列表的“弹出”特性不同。您是否尝试过在一个选定的字段上构建自己的前端，如。通过使用伪元素作为下拉列表，您可以从中获取悬停状态？您似乎误解了我的问题。我实际上是在寻找mouseover eventJS方式的添加，但不是css相关状态，这对javascript之类的业务逻辑没有帮助。看来你误解了我的问题。我实际上是在寻找mouseover eventJS的添加方式，而不是css相关的状态，这对javascript之类的业务逻辑没有帮助。

    <!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>