我想在 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层级是不能改的。 谢谢。
最佳答案
使用 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;
}
关于html - 在输入 :focus using only css 上显示另一个容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17423973/