Question

I am trying to make a big search bar div disappear the second I remove my mouse away from that div (but ONLY after the big search bar is visible from using .click function on another search bar).

Sorry if this sounds confusing but this is what I have done so far:

$("#bar-b").click(function() {
    $("#quickSearch").show();
});

The #bar-bdiv is the small main search bar that once I click on it, the #quickSearch div (the big search bar that I created) appears visible right underneath the small main search bar. What I am trying to do is when I move my cursor into the #quickSearch div (I expect no changes to be made, so nothing to happen, which is what it has done so far) but when I move my cursor AWAY from #quickSearch div, I want #quickSearch div to disappear. If anyone can show me how to do that then I’d appreciate it thanks.

I have made a few attempts, which turned out to be incorrect, such as:

$("#bar-b").click(function() {
    $("#quickSearch").show();
});

$("#quickSearch").mouseleave(function() {
    $("#quickSearch").hide();
});

HTML tags (listed underneath for each div if that helps):

<div id="bar-b">
    <a name="thesearchbox"></a>
    <input id="Keyword" accesskey="4" type="text" name="keyword" value="Search   Jessops - Keyword, name, catalogue no." style="color: rgb(153, 153, 153); ">
    <input id="cmdSearch" class="button" type="submit" value="">
</div>

<div id="quickSearch" style="border: 3px solid black; height: 250px; display: none;">/div>

Answer 1

I think this is what you’re after, if so then you really weren’t far off! I’ve thrown together a jsFiddle example so you can play around, or instruct me further if I’m off your requirement and I’ll try to improve it.

$("#bar-b").bind("click", function() {
    $("#quickSearch").show();
});

$("#quickSearch").bind("mouseout", function() {
    $(this).hide();
});
​