Question

我需要能够单击某个区域（框）并显示一些文本，然后再次单击页面上的任何其他位置以使其消失。我开始把它悬停在盒子上，它工作正常。鼠标悬停在它上面后出现文本。

我尝试将: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

Answer 2

删除:hover css样式

为点击事件添加Javascript处理程序

$(document).ready(function(){
    $(".noshow").hide();
    $(".wrap").click(function(){
        $(".show").toggle();
        $(".noshow").toggle();
    });
});

这是小提琴：http://jsfiddle.net/EU53E/

Answer 3

添加javascript并删除悬停

 $(function(){
       $(".noshow").hide();
       $(".wrap").on('click',function(){
       $(".noshow,.show").toggle();
        });
    });

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

3 个答案: