javascript - 通过单击鼠标切换文本以显示在某个位置

Question

我需要能够单击一个区域(框)并显示一些文本，然后再次单击页面上的其他任何地方以使其消失。我开始时将它悬停在盒子上，效果很好。鼠标悬停在文本上后，文本就会出现。

这是我得到的 jsfiddle:http://jsfiddle.net/TW2Le/73/

我试图将 :hover 更改为 :active ，但它仍然不起作用。我应该怎么做才能让它点击显示，点击其他地方隐藏。

Answer 1

有复选框 hack，使用带有标签的隐藏复选框来仅捕获 CSS 中的点击，然后使用相邻的同级选择器来更改元素的可见性。

这只使用 CSS 来捕获点击，没有 javascript :

.wrap {
    outline: 1px dotted blue;
    height: 107px;
    width: 130px;
    display: block;
}

.noshow, #click, #click:checked ~ .show {display : none;}

.noshow {
    color: #050505;
    font-weight:bold;
    text-align:justify;
    line-height: 1em; 
    font-size:small;
}

#click:checked ~ .noshow {
    display: block;
}

FIDDLE

对于在框外任意位置单击时恢复单击的 jQuery 版本，您可以这样做

$(function() {
    $(document).on('click', function(e) {
        if ( $(e.target).closest('.wrap').length ) {
            $('.show').hide();
            $('.noshow').show();
        }else{
            $('.show').show();
            $('.noshow').hide();
        }
    });
});

FIDDLE