将鼠标hover在选择列表中的上

我试图在将鼠标hover在选择列表中的选项上时显示说明，但是，我无法在hover时识别代码。

相关代码：

选择表格块：

操作选择（前面定义的数组）：

 function rankFeatures(create) { var $optionList = $("#optionList"); var $ranks = $("#ranks"); if(create == true) { for(i=0; i<5; i++){ $optionList.append(features[i]); }; } else { var index = $optionList.val(); $('#optionList option:selected').remove(); $ranks.append(features[index]); }; 

}

这一切都有效。 当我试图处理hover在选项上时，这一切都崩溃了：

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

我在搜索Stack Exchange时发现了代码，但是我没有运气让它工作。 单击某个选项时会发出警报。 如果我不移动鼠标并通过按Enter键关闭警报，它就会消失。 如果我用鼠标关闭，会弹出第二个警告窗口。 只是偶尔在选择项周围移动鼠标会弹出一个警告框。 我已尝试直接定位选项，但在此方面收效甚微。 如果我将鼠标hover在某个选项上，如何才会弹出警报？

谢谢阅读！

Answer 1

您可以使用mouseenter事件。

而且您不必使用所有这些代码来检查元素是否是一个option 。

只需使用.on()语法委托给select元素。

 $(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.. }); }); 

演示http://jsfiddle.net/AjfE8/

Answer 2

尝试使用鼠标hover。 它为我工作。 只有当焦点来自选项列表（如mouseout）时，hover也会起作用。

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

Answer 3

你不需要在一个函数中说唱，我永远无法以这种方式工作。 拿出来时效果很完美。 还使用鼠标hover，因为离开目标时会运行hover 。

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

小提琴看它工作。 将其更改为控制台，这样您就不会收到带有警报的垃圾邮件。 http://jsfiddle.net/HMDqb/

Answer 4

你想要的是检测选项元素上的hover事件，而不是选择：

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

Answer 5

我有同样的问题，但没有一个解决方案正在运作。

 $("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!'); }; }); 

在这里我的jsfiddle https://jsfiddle.net/ajg99wsm/