html - 单击我的 div 内部时需要我的 div 保留

Question

我找到了显示和隐藏内容的代码。这是一个非常简单的代码，但即使您单击框中的内容，内容也会消失。没有js只有CSS。请帮我解决这个问题。

.span3:focus~.alert {
  display: none;
}

.span2:focus~.alert {
  display: block;
}

.alert {
  display: none;
}

<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert">Some alarming information here</p>

Answer 1

同时将focus/hover 状态添加到警报:

.span3:focus~.alert {
  display: none;
}

.span2:focus~.alert {
  display: block;
}

.alert {
  display: none;
  outline: none;
}

.alert:focus,
.alert:hover /*the hover is mandatory in this case*/{
  display: block;
}

<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>

更新

如果你想让警告一直可见直到你点击隐藏我，你可以试试这个:

.span3 {
  position:relative;
  z-index:1; /*Make it above the alert*/
}

.span3:focus~.alert {
  display: none;
}

.span2:focus~.alert {
  display: block;
}

.alert {
  display: none;
  outline: none;
}

.alert:focus,
.alert:hover /*Here the hover is mandatory*/{
  display: block;
}

/*Cover the whole screen and keep the hover on the alert*/
.alert:after {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>