html – 当我点击div时,需要我的div留下来

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

.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>

解决方法

将焦点/悬停状态添加到警报中：

.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>

UPDATE

如果你想让警报始终可见,直到你点击隐藏我,你可以试试这个：

.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>