Showing a div on hover and enabling a selection of the content with jQuery

Question

I am using the hoverIntent.js jQuery plugin to enable a div be made visible on hover which I have managed to successfully achieve.

The problem I am now trying to solve is to enable items within this now visible div to be selected. I guess I would like to pass this hovered intent over to this now visible div. Is this possible and how would I go about doing this?

Here is an example of my problem on jsFiddle

Update

Here is an update to the problem - basically there is more then one div floated beside each other launching a separate hidden div.

Answer 1

If you nest your elements withing the inner-block you will get the desired effect

<div class="block">    
    <div class="inner-block">
        <h1>Button</h1>
        <div id="hide">
            <h2>Blah</h2>
            <h2>Blah</h2>
            <h2>Blah</h2>
        </div>
    </div>    
</div>

---

$(document).ready(function() {
    $("#hide").hide();
    $(".inner-block").hoverIntent({
        over: show,
        timeout: 100,
        out: hide
    });

});

function show() {
    $("#hide").show("fast");
};

function hide() {
    $("#hide").hide("slow");
};

http://jsfiddle.net/taJmz/4/