How to make a "perfect" hover using jQuery?

Well, I've almost achieved what I was aiming for. There's an image and when hovered, a div fades over with text and background. The problem is when the user hovers the "new" div (text and background).

Here's the HTML:

<div id="wrap">
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/abstract" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="adm开发者_开发问答in-img">
                <img src="http://lorempixum.com/g/210/210/nature" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="admin">
            <div class="admin-img">
                <img src="http://lorempixum.com/g/210/210/sports" />
            </div>
            <div class="admin-txt">
                <h2>Name</h2>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/city" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/nightlife" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/people" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/food" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
        <div class="other">
            <div class="other-img">
                <img src="http://lorempixum.com/g/100/100/animals" />
            </div>
            <div class="other-txt">
                <h3>Name</h3>
                <p>Job description</p>
            </div>
        </div>
    </div> 

Here's the jQuery I used:

$(document).ready(function() {
    $("div.admin-img").hover(
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.admin-txt').stop(true,true).fadeOut(100);
        });
    $("div.other-img").hover(
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeIn(100);
        },
        function () {
            $(this).siblings('.other-txt').stop(true,true).fadeOut(100);
        }); 
});

How can I make it better? And, on small images, how can I make the background cover the whole image?

Thanks in advance, Dani.

---

The problem is that you've used the hover toggle on the parent div. Once you hover over the child div your parent looses focus and therefore fires the unhover event.

You should do a check in your unhover event to determine whether you've moved the cursor into the child and cancel the event if this is the case.

---

http://jsfiddle.net/p8gWf/

Changes made on the javascript portion.

---

Another alternative is to simply position your div and make it opacity = 0. Then, you assign the hover to the overlaid div and fade it to 100% opacity. No more hover ambiguity.