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

概述我找到了一个显示和隐藏内容的代码.这是一个非常简单的代码,但即使您单击框中的内容,内容也会消失. CSS没有js.请帮我解决这个问题. .span3:focus~.alert { display: none;}.span2:focus~.alert { display: block;}.alert { display: none;} <span class="span3" 我找到了一个显示和隐藏内容的代码.这是一个非常简单的代码,但即使您单击框中的内容,内容也会消失. CSS没有Js.请帮我解决这个问题.

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

<span  tabindex="0">HIDe Me</span><span  tabindex="0">Show Me</span><p >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  tabindex="0" >HIDe Me</span><span  tabindex="0">Show Me</span><p  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  tabindex="0" >HIDe Me</span><span  tabindex="0">Show Me</span><p  tabindex="0">Some alarming information here</p>

总结

以上是内存溢出为你收集整理的html – 当我点击div时,需要我的div留下来全部内容，希望文章能够帮你解决html – 当我点击div时,需要我的div留下来所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。