Attach hover event multiple elements using jquery

Question

I have the following 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>

My requirement is when I hover on the "searchIcon" element the div with class "phoneSearchBox" is displayed and a user can enter the text and can hit search button. But when i do this with .hover() event no doubt "phoneSearchBox" is displayed but when i move the mouse out of the "searchIcon" and go to the div "phoneSearchBox" it disappears. I have tried using :

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

but not able to get this working. Any help to accomplish this is highly appreciated?

Arun P Johny · Accepted Answer · 2013-10-23 12:23:57Z

2

The main problem here is as soon as the mouse exists from search icon the search box is hidden without any delay.

One possible solution is this scenario is to use a timer based hide function as shown below.

Try something like

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

Demo: Fiddle

edited Oct 23, 2013 at 12:23

answered Oct 23, 2013 at 12:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maninder Over a year ago

trying to add some effects with SlideUp() and SlideDown() but this is sliding in delayed effect (just like a page loads slowly).

Collectives™ on Stack Overflow

Attach hover event multiple elements using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related