Как сделать "идеальный" зависание с помощью jQuery?

Question

Ну, я почти достиг того, к чему стремился. Там изображение и когда парил, div исчезает с текстом и фоном. Проблема в том, что когда пользователь наводит курсор на "новый" элемент div (текст и фон).

Вот 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="admin-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> 

Вот jQuery, который я использовал:

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

Как я могу сделать это лучше? И на маленьких изображениях, как я могу сделать фон покрывающим все изображение?

Заранее спасибо, Дани.

Answer 1

http://jsfiddle.net/p8gWf/

Изменения, сделанные в части JavaScript.

Answer 2

Проблема в том, что вы использовали переключатель наведения на родительском элементе div. Когда вы наводите курсор на дочерний элемент div, ваш родитель теряет фокус и, следовательно, запускает событие unhover.

Вы должны проверить событие unhover, чтобы определить, переместили ли вы курсор в дочерний элемент, и отменить событие, если это так.

Answer 3

Другая альтернатива - просто расположить ваш div и сделать его непрозрачным = 0. Затем вы назначаете наведение наложенному div и уменьшаете его до 100% непрозрачности. Нет больше неопределенности.