代码之家 › 专栏 › 技术社区 › Frank

当鼠标位于选项上方时,选择“失去焦点”

jquery javascript

Frank · 技术社区 · 16 年前

我试图做一个悬停效果如下:

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

有谁能告诉我,当有人打开选项并悬停在选项上时,我怎么能确保不打电话呢?

顺便说一句:当鼠标按钮在选择过程中被按下时,它确实起作用。

3 回复 | 直到 16 年前

mck89 16 年前

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

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

这样,当用户单击某个选项或在选择外部单击时,选择将被隐藏。我认为这也是更多的练习。

Jagd Dai 16 年前

你试过使用hover()事件吗?

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

Russ Cam 16 年前

用包装纸包起来 <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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

8 月前

user28928120 · 如何在jquery中选择所有类?

8 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

8 月前