0

簡単な質問ですが、クラスオーバーレイを使用した画像とスパンを含む図があります。私のjsでは、ホバーするとオーバーレイの不透明度が変化して、画像の背後にあるコンテンツが表示されます。

ユーザーが画像をクリックすると、不透明度の状態を1のままにする必要がありますが、問題は、マウスが.overlay領域を離れると、不透明度が0に戻ることです。

ホバーの途中で流れを止める方法はありますか？

JS：

$(".overlay").hover(function () {
        $(this).stop().animate({'opacity':'1.0'}, 400);
    }, function () {
        $(this).stop().animate({'opacity':'0'}, 400);
    });

HTML

<figure>
    <div class="contents">
        <img src="images/photo_person.png" alt="Name">
        <div><span class="overlay"><h3>Name/h3> Occupation</span></div>

        <div class="bio">
        <div class="close"><a href="#">x</a></div>
        <div class="scroll-pane">
        <p>Content Text Here</p>
        </div>
        </div> 
</div>
</figure>

乾杯

4

2 に答える 2

4

クリック時にホバーハンドラーを削除します。

$(".overlay").click(function () {
    $(this).unbind("hover");
});
于 2012-04-05T17:37:16.040 に答える
0

これはそれを行う必要があります：

cool_function($('.overlay'));

function cool_function(selector) {

    $(selector).hover(function() {
        $(this).stop().animate({
            'opacity': '1.0'
        }, 400);
    }, function() {
        $(this).stop().animate({
            'opacity': '0'
        }, 400);
    }).click(function() {
        $(this).unbind('mouseenter mouseleave click');
        $(this).click(function(){
            cool_function($(this));
        });
    });
}​

フィドルを参照してください：http： //jsfiddle.net/xEyCB/1/

于 2012-04-05T17:40:13.517 に答える