CSS中使用:focus-within能够实现有意思的效果

发布时间：2023-10-16 15:31:51 所属栏目：语言来源：

导读：跟大家讲解下有关“CSS中使用:focus-within能够实现什么有意思的效果”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

相信有些人看到过这个B站

跟大家讲解下有关“CSS中使用:focus-within能够实现什么有意思的效果”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

相信有些人看到过这个B站输入密码就遮眼睛的这个图

这里我们用:focus-within玩一把

布局是这样的

外面有一个ctn 可以忽略，就是一个居中固定位置而已

xPassword在没点击之前里面的“suo”这个图是隐藏的

xPassword 同级屁股后的“r6m”此时是显示的

当我们一点击xPassword后同级第一张图‘r6m’隐藏

:focus-within ~ img的 ~ 这个符号是同级屁股后第一个的意思

同时xPassword里面的一张图‘suo’的这个display为显示！这时就成了你输密码我就装作看不见

<div class="ctn">

  <div class="xPassword">

    <input type="password" placeholder="请输入密码" class="input">

    <img src="http://suo.im/5UnnjN" alt="">

  </div>

  <img src="http://r6m.cn/csAC" alt="">

</div>

.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 h2 {

  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;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!