在input：focus上仅使用CSS显示另一个容器

Question

我想在input：focus上拥有一些CSS属性，该怎么办？我的情况是；当输入获得焦点时，我想显示另一个div，那么如何仅使用CSS做到这一点？

在悬停时，我可以使用“>”来做到这一点，但是不能将焦点放在工作上，我也不明白为什么:(

所以这是我的代码：

<div class="containerTooltipXxx">
 <p class="paragraphClass">
     Some text...<br /><input type="radio" /><br />More text...
     </p><div class="blocks">
<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层次结构。谢谢。

小提琴

Answer 1

使用CSS，您只能指向下一个兄弟元素。由于p标签不在父div范围内，因此无法使用css。

我知道您不想更改HTML顺序，但是例如，我仍在显示它。

在p中移动p标签div.blocks只能使用CSS做到这一点

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

演示