Javascript 将鼠标悬停在选择列表中的

我试图在将鼠标悬停在选择列表中的某个选项上时显示描述，但是，在悬停时，我很难让代码识别

相关代码：

选择表单块：

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

我在通过堆栈交换进行搜索时发现了该代码，但我没有运气让它正常工作。当我单击某个选项时，会出现此警报。如果我不移动鼠标并按enter键关闭警报，警报就会消失。如果我用鼠标关闭，会弹出第二个警报窗口。只需在“选择”按钮周围移动鼠标，偶尔会弹出一个警告框。 我曾尝试直接针对这些选项，但收效甚微。如果我将鼠标悬停在某个选项上，如何使警报弹出

---

谢谢你的阅读

试试鼠标盖。这对我有用。仅当焦点从选项列表（如鼠标输出）中出来时，悬停也有效

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

---

您要检测的是选项元素上的悬停事件，而不是选择：

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})​

---

你不需要在函数中插入说唱，我永远无法让它以这种方式工作。当把它拿出来的时候，效果非常好。也用于离开目标时运行

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})​

摆弄小提琴看它工作。将其更改为console，这样您就不会收到垃圾邮件通知

您可以使用该事件

您不必使用所有这些代码来检查元素是否是选项

只需使用语法委托给select元素

---

演示在

我有同样的问题，但没有一个解决方案是有效的

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});

---

这里是我的JSFIDLE

，如果您想更轻松，我建议您使用定制的变体

捕获悬停事件 更改悬停颜色 下拉列表和“所有项目”视图的行为相同 再加上你可以

可调整大小的列表 单选和多选模式之间的单独切换 更个性化的css设计 选项项的多行 请看一下随附的样品

$document.readyfunction{ $'.custopt'.addClass'liunsel'； $.custopt、.custcont.onmouseover、functione{ 如果$this.attrid==crnk{ $ranks.css显示，块 }否则{ $this.addClasslihover； } } $.custopt、.custcont.onmouseout、functione{ 如果$this.attrid==crnk{ $ranks.css显示，无 }否则{ $this.removeClasslihover； } } $.custopt.onclick，function e{ $.custopt.removeClasslihover； 如果$btsm.val==ssm{ //单选模式 $.custopt.removeClasslisel； $.custopt.addClassliunsel； $this.removeClassliunsel； $this.addClasslisel； }如果$btsm.val==msm，则为else{ //多选模式 如果$this.is.lisel{ $this.addClassliunsel； $this.removeClasslisel； }否则{ $this.addClasslisel； $this.removeClassliunsel； } } 上头； }; $.custbtn.onclick，函数{ 如果$this.val==ssm{ $this.valmsm； $this.text切换到单选模式 }否则{ $this.sm； $this.text切换到多选模式 $.custopt.removeClasslisel； $.custopt.addClassliunsel； } 上头； }; 功能UpdCustomhead{ 如果$btsm.val==ssm{ 如果$.lisel.length 1 | | numopt==0？'s'：； } } }; 身体{ 文本对齐：居中； } 利塞尔先生{ 背景颜色：黄色； } 刘森斯先生{ 背景颜色：浅灰色； } lihover先生{ 背景颜色：珊瑚； } 卡斯托普先生{ 保证金：.2EM0.2EM0； 填充：.1em.3em.1em.3em； 文本对齐：左对齐； 字体大小：.7em； 边界半径：.4em； } .客户名单， 库斯海德先生{ 宽度：100%； 文本对齐：左对齐； 填充：.1em； 边界：浅海绿色固体。2米； 边界半径：.4em； 高度：4em； 溢出y：自动； 调整大小：垂直； 用户选择：无； } .客户名单{ 显示：无； 光标：指针； } 库斯海德先生{ 调整大小：无； 身高：2.2米； 字体大小：.7em； 填充：.1em.4em.1em.4em； 边缘底部：-.2米； 宽度：95%； } 卡斯特康特先生{ 宽度：7em； 填充物：5em 1em.6em.5em； /*边框：蓝色实心。2米*/ 保证金：1em自动1em自动； } .custbtn{ 字体大小：.7em； 宽度：105%； } h3{ 边缘：1米0.5米.3米； 字体大小：粗体； 字号：1em； } 保险商实验室{ 保证金：0； } 自定义可选择、可悬停、可调整大小的下拉列表，支持多行、单选和多选 切换到多选模式 当前选定选项 选择一 选择二 第三个长期选择 另一个第四长选项

---

给出一个你想要的早期定义数组的示例？看一看。您可能需要同时处理mouseenter和mouseleave。在您的情况下，只有mouseleave起作用。包装函数是DOM就绪事件。他做得很好，把它包在里面。显然，当你的小提琴的尺寸变为1的时候，它对铬合金不起作用。但使用size=2似乎有效：遗憾的是，在常规下拉框中，如果没有size=X，这似乎不起作用。即使在删除显示的错误或 将代码替换为您的答案之一。但没有用完全不同的东西进行测试。

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})​

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});