html – 在输入上显示另一个容器：仅使用css进行聚焦

概述我想在输入上有一些css属性：焦点所以我该怎么做？ 我的情景是;当输入获得焦点时,我想显示另一个div,那么我怎么能只使用css呢？ 在悬停时我可以使用“>”来做到这一点但焦点不起作用,我不明白为什么:(. 所以这是我的代码： <div class="containerTooltipXxx"> <p class="paragraphClass"> Some text...<br />< 我想在输入上有一些CSS属性：焦点所以我该怎么做？
我的情景是;当输入获得焦点时,我想显示另一个div,那么我怎么能只使用CSS呢？

在悬停时我可以使用“>”来做到这一点但焦点不起作用,我不明白为什么:(.

所以这是我的代码：

<div > <p >     Some text...<br /><input type="radio" /><br />More text...     </p><div ><label>FIEld</label>  <input></input></div></div>  .containertooltipXxx{        padding: 20px;         position: relative;        float: left;        display: inline-block;        border: 2px solID lime;        margin: 50px;    }    .paragraphClass{display: none;}.containertooltipXxx:hover > .paragraphClass,.containertooltipXxx:focus > .paragraphClass{        display: block;        position: absolute;        top:-5px;        left: 50px;        background: red;        opacity:.9;    }

非常重要的是,HTML层次结构无法更改.
谢谢.

fiddle

解决方法 使用CSS你只能指向下一个兄弟元素.这里因为p标签不在父div中,所以不可能使用CSS.

我知道您不想更改HTML顺序,但我仍然以示例方式显示它.

在div.blocks中移动p标签只能使用CSS

.blocks input[type="text"]:focus ~ .paragraphClass {    display: block;    position: absolute;    top:-50px;    left: 50px;    background: #ccc;    opacity:.7;}

DEMO

总结

以上是内存溢出为你收集整理的html – 在输入上显示另一个容器：仅使用css进行聚焦全部内容，希望文章能够帮你解决html – 在输入上显示另一个容器：仅使用css进行聚焦所遇到的程序开发问题。

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