jQuery fadeToggle + mouseout combination, prevent toggled content triggering an event

Question

I'm trying to achieve this:

Display a box showing a full width & height image, also containing a trigger. When hovering over the trigger, a DIV will expand to cover the box, then reveal some content, including a clickable link. When moving the cursor outside the image box, the DIV cover will disappear, and the box returns to its original state.

Here's where I am:

http://jsfiddle.net/wfXYy/1/

I'm looking for pointers for two things:

1. To ensure only one instance of the DIV (.content) is revealed (ie: only show the content for the box trigger hovered over).

2. Ensure that when the text inside .content is hovered over (the link), it does not close the revealed content and revert back to its orignal state, but you can happily click the link.

For point 1 I'm sure "this" is the answer but can't get that working, and for point 2 I'm wondering why when hovering the text, the trigger is fired.

Pretty sure all the work needs to be done within this block of jQuery:

$('.corner').hover(function() {
    $(this).addClass("corner-full").mouseout(function() {
        $(".corner").removeClass("corner-full");     
    });
    $('.content').fadeToggle();
});

Any tips greatly appreciated, thanks.

Answer 1

You can try setting up your HTML like this:

<div class="wrap">
    <div class="image-cover"> 
        <div class="corner">
            <div class="content">
                <h1>Title</h1>
                <a href="#">Link</a>
            </div>
        </div>
        <img src="http://dummyimage.com/300x300/ccc/ccc" />
    </div>
</div>

And the jquery like this:

$('.corner').hover(function() {
    $(this).addClass("corner-full");
    $(".content", this).fadeToggle();
}, function() {
    $(this).removeClass("corner-full");
    $(".content", this).fadeToggle();
});

Answer 2

No need to use the mouseout handler; the hover function will take care of that for you with a second callback. You can use next to get the relevant .content div.

$('.corner').hover(function() {
    $(this).addClass("corner-full").next().fadeToggle();
}, function() {
    $(this).removeClass("corner-full").next().fadeToggle();
});

Working Fiddle

api.jquery.com/hover/