javascript - 当鼠标悬停在选项上时，select 失去焦点

Question

我正在尝试做一个悬停效果如下:

<div>Some Text</div>

应该用 <select> 代替鼠标悬停时。一旦鼠标离开选择它应该显示以前显示的值或新选择的值。

不幸的是，当您打开下拉菜单选择一些选项时，mouseleave 被调用，我无法让它工作。有没有人以前遇到过这个问题并且知道解决方案？

<div id="text">Some Text</div>
<select id="selector" style="display: none">
<option value="1" selected="selected">Some Text</option>
<option value="2">Some More</option>
<option value="3">Some Other</option>
</select>

jQuery:

$("#text").mouseover(function()
{
    $(this).hide();
    $("#selector").show();
});

$("#selector").mouseleave(function()
{
    $(this).hide();
    $("#text").show();
});

任何人都可以告诉我如何确保在有人打开选择并将鼠标悬停在选项上时不调用 mouseleave 吗？

顺便说一句:在选择过程中按下鼠标按钮时它会起作用

Answer 1

我认为你应该使用 change 和 blur 事件来做到这一点:

var hidesel=function()
{
    $(this).hide();
    $("#text").show();
}
$("#selector").change(hidesel).blur(hidesel);

以这种方式，当用户点击一个选项或点击选择外时，选择将被隐藏。我认为这也是更多的练习。