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/

点击后停止悬停？

2 个答案: