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，那就没问题，但是否则这样就很难维护网站。

编辑：玩完之后，我意识到你会想要焦点而不是mouseleave事件

Answer 2

.styledBtnSearch:hover+input {
    display:block
}

.hideContent {
    display: none
}

http://jsfiddle.net/oLfLjyuu/3/

这只会在悬停时隐藏和显示，万一你想要它不要崩溃你必须把它放在父div上，我不确定你能修改html吗？如果你真的想要幻灯片选项请注释（你可以使用转换）

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

2 个答案: