html - 在输入 :focus using only 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层级是不能改的。谢谢。

fiddle

Answer 1

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