html – 在输入上显示另一个容器:仅使用css进行聚焦

发布时间:2020-09-21 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 在输入上显示另一个容器:仅使用css进行聚焦编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我想在输入上有一些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

解决方法

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

总结

以上是编程之家为你收集整理的html – 在输入上显示另一个容器:仅使用css进行聚焦全部内容,希望文章能够帮你解决html – 在输入上显示另一个容器:仅使用css进行聚焦所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!