鼠标悬停并单击以使用CSS和JS显示文本

Question

目前我有这个：http://jsfiddle.net/TW2Le/95/

我希望能够单击该框以显示文本，然后单击其他任何位置以隐藏文本。点击一次= show，其他地方点击第二次= hide。 （这部分有效）

当它没有“点击”时，它应该在我悬停时显示文本，但是当我将鼠标悬停在单击时，它不应该在旧文本的顶部显示文本。

我遇到了一个问题，当我将鼠标悬停在单击状态时，它会显示双倍的文字。我不知道如何在show条件下禁用“悬停”。它不应该重复相同的文本。

Answer 1

http://jsfiddle.net/TW2Le/97/

试试这个。

$('.wrap').removeClass('reveal');

$('.wrap').addClass('reveal');

我将这些添加到你的jquery中，这样当“show”可见时，悬停不会做任何事情。

Answer 2

DEMO

<强> JS

$(function() {
    $(document).on('click', function(e) {
        if ( $(e.target).closest('.wrap').length ) {
             $('.show').slideToggle();
            $('.noshow').slideToggle(); 
            $(".here").addClass("hide");
        }else{
            $('.show').slideDown();
            $('.noshow').slideUp();
            $(".here").removeClass("hide");
        }
    });
});

添加新的CSS规则

.wrap:hover .here.hide {
    display:none;
}