javascript – 切换jquery – 问题

div.fileinputs {
    position: relative;
    display: none;
}

#show {
    width: 200px;
    height: 40px;
    BACkground-color: red;
    z-index: -2px;
    position: absolute;
}

<div id="show"></div>

<div class="fileinputs">Visible Panel Div</div>

$('#show').mouSEOver(function() {
    $('.fileinputs').toggle();
});

鉴于您只想在mouSEOver上显示元素然后在mouSEOut上隐藏它,您还应该使用mouSEOut()来定义移除鼠标时所需的行为：

$("#show")
    .mouSEOver(function(){
        $(".fileinputs").toggle();
    })
    .mouSEOut(function(){
        $(".fileinputs").toggle();
    });

Example.(这是不稳定的,因为fileinputs是一个单独的元素,并且它不计算悬停在show div上的悬停).

但你应该使用悬停,只是为了让它更容易：

$("#show").hover(function(){
    $(".fileinputs").show();
},function(){
    $(".fileinputs").hide();
});

Example.(由于与上述相同的原因,波涛汹涌).

由于你想要的行为是明确的,我们只需要在鼠标悬停时使用show(),并在删除时隐藏().

顺便说一句,最好使用delegate()(对于旧版本的jQuery)或on()(对于jQuery 1.7)绑定事件：

$(document).on("mouSEOver mouSEOut","#show",function(){
    $(".fileinputs").toggle();
});

Example.

虽然,你真的应该只使用CSs.您可以将fileinput放在show中并使用子选择器：

#show:hover > .fileinputs {
    display: block;
}

0700 3.这个没有闪烁,因为元素位于附加悬停声明的元素内部,而CSS认为它就好像你仍然悬停在父元素上(因为你在技术上是,作为悬停的目标在父级的边界内[如果它在边界之外它仍然可以工作,因为元素仍然是嵌套的]).