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？

BTW：在选择期间按下鼠标按钮时它会起作用

Answer 1

我认为您应该使用更改和模糊事件来执行此操作：

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

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

Answer 2

您是否尝试过使用hover（）事件？

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

Answer 3

将其包装在包装器<div>中并在该

上设置事件处理程序

<强> Working Demo

的jQuery

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

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

$("#selector").change(function() {
    var value = $(this).val();
    $("#text").text($("option[value='"+value+"']", this).text());

});

HTML

<div id="wrapper">

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

</div>

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

3 个答案: