jquery - 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

もう 1 つの方法は、単に div を配置し、不透明度 = 0 にすることです。次に、オーバーレイされた div にホバーを割り当て、不透明度 100% にフェードします。あいまいさをホバーする必要はもうありません。

Answer 3

http://jsfiddle.net/p8gWf/

JavaScript 部分の変更。