从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要为大家展示了css中:focus-within怎么用,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css中:focus-within怎么用”这篇文章吧。
这里我们用:focus-within玩一把
布局是这样的
外面有一个ctn 可以忽略,就是一个居中固定位置而已
xPassword在没点击之前里面的“suo”这个图是隐藏的
xPassword 同级屁股后的“r6m”此时是显示的
当我们一点击xPassword后同级第一张图‘r6m’隐藏
:focus-within ~ img的 ~ 这个符号是同级屁股后第一个的意思
同时xPassword里面的一张图‘suo’的这个display为显示!这时就成了你输密码我就装作看不见
.ctn { position: relative; width: 318px; margin: 100px auto; height: 370px; padding: 20px; box-sizing: border-box; background: #fff; z-index: 10; box-shadow: 0 0 15px #cfcfcf; } .ctn h3 { font-size: 20px; font-weight: bold; margin-bottom: 30px; } .ctn input { padding: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; box-sizing: border-box; font-size: 16px; } img { position: absolute; top: -23%; left: 50%; width: 80px; height: auto; transform: translate(-50%, 0); } .xPassword img { display: none; width: 103px; height: auto; top: -26%; } //以上毫无价值,可以忽略,下方两个才是重点 .xPassword:focus-within ~ img { display: none; } .xPassword:focus-within img { display: block; }
以上就是关于“css中:focus-within怎么用”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图