Question

我有以下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>

我的要求是当我将鼠标悬停在＆＃34; searchIcon＆＃34;元素div与类＆＃34; phoneSearchBox＆＃34;显示，用户可以输入文本，可以点击搜索按钮。但是当我用.hover（）事件做这件事时毫无疑问＆＃34; phoneSearchBox＆＃34;显示但当我将鼠标移出＆＃34; searchIcon＆＃34;并转到div＆＃34; phoneSearchBox＆＃34;它消失了。我尝试过使用：

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

但无法实现这一目标。任何帮助实现这一点是非常感谢？

Answer 1

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

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

尝试类似

的内容

$('.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();
})

演示：Fiddle

使用jquery附加悬停事件多个元素

1 个答案: