我想在输入上有一些css属性:焦点所以我该怎么做?
我的情景是;当输入获得焦点时,我想显示另一个div,那么我怎么能只使用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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。