3

I want to have some css properties on input:focus so how can I do that? My scenario is; when input get focus I want to show another div so how can I do that using only css?

On hover I can do that using ">" but on focus is not working and I don;t understand why :(.

so this is my code:

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

very important, the html hierarchy cannot be changed. Thank you.

fiddle

4

3 回答 3

5

使用 CSS 你只能指向下一个兄弟元素。在这里，由于 p 标签不在父 div 中，因此无法使用 css。

我知道您不想更改 HTML 顺序，但我仍然在展示它。

div.blocks仅使用 CSS将 p 标签移动到内部即可

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

演示

于 2013-07-02T11:24:37.513 回答
2 
.containerTooltipXxx:hover >  replace this by
.containerTooltipXxx:focus ~ .paragraphClass
{
  display: block;
    position: absolute;
    top:-5px;
    left: 50px;
    background: red;
    opacity:.9;
}
于 2013-07-02T11:37:35.713 回答
1

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

您正在做什么.containerTooltipXxx:focus > .paragraphClass，是从一个重点突出的 .containerTooltipXxx 中选择直接子 .paragraphClass。焦点只能用于有输入的事物，而你的容器只是一个 div。

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

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

于 2013-07-02T11:36:41.210 回答