jquery - 单击后停止悬停？

Question

只是一个简单的问题，我有一个图形，其中包含一个图像和一个带有类覆盖的跨度。在我的 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>

干杯

Answer 1

删除悬停处理程序 onclick：

$(".overlay").click(function () {
    $(this).unbind("hover");
});

Answer 2

这应该这样做：

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/