Question

我有一张表格，我打算成为＆＃34;涵盖＆＃34;直到用户将鼠标移到它上面。要做到这一点，我有一个通过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上时，覆盖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/

Answer 1

这是因为你的表格会隐藏起来因此会引发鼠标离开。

尝试：

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

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

jQuery hover不停地发射

1 个答案: