1

我有以下html

<div id="logoandsearch">                        
    <a class="searchIcon visible-phone" href="javascript:void(0);"><i class="icon-search"></i></a>
    <div id="secondaryNav" class="visible-desktop">
        <ul>
            <li></li>
        </ul>
    </div>
    <div id="top-search">
        <div id="top-searchbox">
            <asp:TextBox runat="server" ID="txtSearch" autocomplete="off" ClientIDMode="Static" MaxLength="100"></asp:TextBox>
            <input type="button" id="btnSearch" value="Search" class="btn btn-inverse" />
        </div>
    </div>
</div>
<div class="phoneSearchBox" style="display: none">
    <input type="text" class="searchtextPhone"/>
    <input type="button" class="btn btn-primary btnPhoneSearch" value="Search"/>
</div>

我的要求是，当我将鼠标悬停在“searchIcon”元素上时，会显示带有“phoneSearchBox”类的 div，并且用户可以输入文本并点击搜索按钮。但是，当我使用 .hover() 事件执行此操作时，无疑会显示“phoneSearchBox”，但是当我将鼠标移出“searchIcon”并转到 div“phoneSearchBox”时，它就会消失。我试过使用：

$('.searchIcon, .phoneSearchBox').hover(function () {
        $('.phoneSearchBox').show();
    }
    , function () {
        $('.phoneSearchBox').hide();
    });

但无法使其正常工作。非常感谢任何帮助来实现这一点？

4

1 回答 1

2

这里的主要问题是，一旦鼠标从搜索图标中存在，搜索框就会立即隐藏。

一种可能的解决方案是这种情况是使用基于计时器的隐藏功能，如下所示。

尝试类似的东西

$('.searchIcon').hover(function () {
    //clear any previously registered hide functions
    clearInterval($phoneSB.data('hoverTimer'))

    //on hover of the icon show search form
    $phoneSB.show();    
}, function () {
    //when mouse leaves wait for 200 milliseconds before the search form is hidden... it gives user some time to go to the search box
    var timer = setTimeout(function () {
        $phoneSB.hide();
    }, 200);
    //store the handler id for future reference
    $phoneSB.data('hoverTimer', timer)
});

var $phoneSB = $(' .phoneSearchBox').hover(function () {
    //clear the hide event handler since the user has come to the search form
    clearInterval($phoneSB.data('hoverTimer'));
}, function () {
    //if the user leaves the serarch form hide it again
    $phoneSB.hide();
})

演示：小提琴

于 2013-10-23T12:16:21.237 回答