jquery - 如何从链接悬停中滑出文本框

Question

<div id="ctl00_nmSearch" class="searchBox" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;HiddenSearchNM&#39;)">

                                <input type="text" value="" placeholder="Search WESTMED" id="searchB" class="styledTB searchB floatLeft" />
                                <a href="JavaScript:void(0);" onclick="SearchNMClick();" title="Search" class="styledBtnSearch searchAnchor floatLeft defaultLinks"><img src="theImages/searchWhite.png" alt="Search" title="Search" class="searchImg" /></a>
                                <input type="image" name="ctl00$HiddenSearchNM" id="HiddenSearchNM" class="hideContent" src="" />

</div>

CSS:

.searchBox
{
    background: #FFF;
    width: 100%;
    text-align: left;
}
.styledTB {
    padding-left: 5px;
    background: #E8E8E8;
    opacity: 1;
    border: none;
    outline: none;
    right: 35px;
    box-shadow:
        0px 5px #BBB,
        0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchB
{
    height: 30px;
    width: 80%;
}
.floatLeft {
    float: left;
}
.styledBtnSearch
{
    border: 0;
    background: #0071C7;
    display: block;
    box-shadow:
        0px 5px #014477,
        0px 8px 10px rgba(148, 148, 148, 0.5);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}
.searchAnchor
{
    width: 8%;
    height: 30px;
    line-height: 30px;
}

JSFiddle:http://jsfiddle.net/oLfLjyuu/1/

我如何使用 JQuery，以便当用户将鼠标悬停在蓝色 a 上时，文本框会滑出？我希望它最初隐藏起来。

Answer 1

我使用了 jquery mouseover 和 focusout 事件，带有 jquery ui 滑动效果。

$('.search-module').mouseover(function() {
  $('#searchB').slideDown();
});

$('.search-module').focusout(function() {
  $('#searchB').slideUp();
});

我想这就是你的意思:

http://jsfiddle.net/q90b2nss/

尽管您使用了一些不良做法，但我必须警告您，例如“a”元素具有两个类属性，以及在 HTML 中嵌入 js 行为。如果它只是为了 jsfiddle 那没关系，但否则以这种方式维护网站会变得很困难。

编辑:玩过之后，我意识到你会想要 focusout 而不是 mouseleave 事件