点击内部div时需要我的div留下来

Question

我找到了一个显示和隐藏内容的代码。这是一个非常简单的代码，但即使您单击框中的内容，内容也会消失。 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>

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>

Answer 2

你需要点击div而不是传递它吗？在这种情况下，悬停可以是一个很好的解决方案。看看那段代码：

在这里演示

＆＃13;

＆＃13;

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

.alert {
  display: none;
}

.alert:hover {
  display:block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

祝你有个美好的一天。