Html 在输入时显示另一个容器：仅使用css聚焦

我想在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;
    }

一些文本…

更多文本。。。

领域
.containerTooltipXxx{
填充：20px；
位置：相对位置；
浮动：左；
显示：内联块；
边框：2倍固体石灰；
利润率：50像素；
}
.paragraphClass{显示：无；}
.containerTooltipXxx:hover>.paragraphClass、.containerTooltipXxx:focus>.paragraphClass{
显示：块；
位置：绝对位置；
顶部：-5px；
左：50px；
背景：红色；
不透明度：.9；
}

非常重要的是，html层次结构不能更改。 多谢各位

---

使用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;
}

---

您的第一个悬停选择器正常，但第二个错误

您使用

.containerTooltipxx:focus>.paragraphClass

所做的是从一个focused.containerTooltipxx.focus中选择直接的子.paragraphClass。focus只能用于具有输入的内容，而您的容器只是一个div

您需要的是一个父选择器，但这些当前不可用。它们很可能在CSS4中

---

目前，您最好使用javascript。在输入框上创建一个事件侦听器，以便聚焦，然后以编程方式将一个可见类应用于您想要显示的内容。

所以您根本不想悬停？@Sowmya-nope，我想显示它。paragraphClass仅在输入上：focus。我希望悬停在聚焦上具有相同的行为。谢谢我已经说过，我不能改变html层次结构，所以段落必须是div class=“blocks”的otside（我有下面“Sowmya”给出的相同答案，但我已经说过，我不能改变html层次结构。

.containerTooltipXxx:hover >  replace this by
.containerTooltipXxx:focus ~ .paragraphClass
{
  display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
    opacity:.9;
}