Как сделать "идеальный" зависание с помощью 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

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

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

Answer 2

http://jsfiddle.net/p8gWf/

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

Answer 3

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