javascript - jQuery悬停不停地触发

在用户将鼠标移到它上面之前，我有一个打算被“隐藏”的表单。为此，我有一个div，它通过z-index和绝对定位放置在表单顶部，当用户将鼠标悬停在其上方时，该div将隐藏，从而使该表单可见。

形成：

<div class='container'>
    <div id='form-cover' class='form-cover'>
        <div id='sign-up'>Sign up today!</div>
    </div>

    <form id='register' class='form' method='POST' action='#'>
        <label for='first-name'>First Name: </label>
        <input id='first-name' type='text' length='50'>
        <br />
        <label for='last-name'>Last Name: </label>
        <input id='last-name' type='text' length='50'>
        <br />
        <label for='address'>Address: </label>
        <input id='Address' type='text' length='50'>
    </form>

</div>

jQuery的：

$('#form-cover').hover(function(){
    $(this).hide();
    },function(){
        $(this).show();
});

当前，当我将鼠标移到＃form-cover上时，covering div会继续隐藏，然后反复显示自己，而当我只打算将其隐藏时，当用户的鼠标离开表单时再次显示。

我尝试过的

$('#form-cover').mouseenter(function(){
    $(this).hide();
    //$('#form-cover').removeClass('form-cover');
});
$('#form-cover').mouseleave(function(){
    $(this).show();
    //$('#form-cover').addClass('form-cover');
});

以及将mouseenter和mouseleave链接在一起，但似乎没有任何效果。

任何帮助将不胜感激！

小提琴可以在这里找到http://jsfiddle.net/KXW72/

最佳答案

这是因为您的表格封面被隐藏，从而触发了鼠标离开。

尝试：

$('#form-cover').mouseenter(function() {
   $(this).hide();
});
$('#business').mouseleave(function() {
   $('#form-cover').show();
});

http://jsfiddle.net/KXW72/1/