javascript - 将鼠标悬停在某个区域上时使用 jQuery 在文本框中滑动

Question

新手 jQuery 问题。假设我在网页上有一个标签。我想要将鼠标悬停在标签上时滑出输入框的效果。关于如何组合一些现有的 jQuery 支持来实现它的任何提示？

Answer 1

Example at jsFiddle .

HTML:

<div class="HasHiddenInput">
    <div>My label</div>
    <div class="HiddenInput">
        <input .../>
    </div>
</div>

Javascript:

$(function(){
    $('.HasHiddenInput').hover(
        function(){
            $(this).find('.HiddenInput').stop(true,true).slideDown();
        },
        function(){
            $(this).find('.HiddenInput').stop(true,true).slideUp();
        }
    );
});

可选的 CSS:

.HiddenInput{
    display:none; /*Initially hidden*/
}
.HasHiddenInput{
    padding: 5px;
    border: solid 1px #ccc;
}