jquery - jqueryを使用してホバーイベントの複数の要素をアタッチ

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>

私の要件は、「searchIcon」要素にカーソルを合わせると、クラス「phoneSearchBox」のdivが表示され、ユーザーがテキストを入力して検索ボタンを押すことができることです。しかし、.hover() イベントでこれを行うと、間違いなく「phoneSearchBox」が表示されますが、マウスを「searchIcon」の外に移動して div「phoneSearchBox」に移動すると、消えます。私は使用してみました：

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

しかし、これを機能させることはできません。これを達成するための助けは高く評価されていますか?