javascript - マウス入力/フェードイン/アウト テキスト div への img が機能しない

Question

キャプション div にフェードインしたい画像があります。キャプション div は、マウスが div に入ったときに画像の上に直接フェードインし、マウスが離れるとフェードアウトする必要があります。

次に、画像を選択および選択解除するための click toggleClass 関数を追加したいと思います。画像が選択されている場合、キャプションは表示/表示されたままにする必要があります。画像をクリックして選択を解除すると、キャプションがフェードアウトします。

結論: 1) キャプションのフェードイン/アウトへの mouseenter/leave 2) クリックして選択クラスを切り替えて、キャプションを表示したままにするか、選択を解除して非表示にします。

FiddleJS: http://jsfiddle.net/jhyqt5/cBsqN/

HTML:

 <div class="caption">Into the Night</div>

<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle">
</div>

CSS:

    .img-circle{
    border-radius: 50%; height: 140px; width: 140px;
}
.caption{
    background-color: black; opacity: .7;
    text-align: center; line-height: 120px; color: white;
    position: absolute; display: none;
    border-radius: 50%; height: 140px; width: 140px;
}

JS:

$('.caption').mouseenter(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeIn();
}).mouseleave(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeOut();
 });