Question

我想在输入上有一些css属性：focus所以我该怎么做？我的情景是;当输入获得焦点时，我想显示另一个div，那么我怎样才能使用css？

悬停时我可以使用“＆gt;”但焦点不起作用，我不明白为什么:(。

所以这是我的代码：

<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

Answer 2

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

Answer 3

你的第一个悬停选择器很好，但第二个是错误的。

您正在使用.containerTooltipXxx:focus > .paragraphClass进行的操作是从焦点.containerTooltipXxx中选择直接子.paragraphClass。焦点只能用于带输入的东西，而你的容器只是一个div。

您需要的是父选择器，但目前这些选择器不可用。他们最有可能在CSS4中。 http://www.w3.org/TR/selectors4/#subject

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

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

3 个答案: