--- theme: hydrogen --- 这是我参与更文挑战的第7天，活动详情查看： [更文挑战](https://juejin.cn/post/6967194882926444557) ## 前言今天在浏览器登录掘金的时候，发现使用 **“账密登录”** 时，掘金小熊猫会随着当前鼠标焦点不同而改变，这个小彩蛋看起来很有意思的样子。如下图： ![GIF 2021-6-7 16-03-24.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89698df8d8fa43e89d8fbf4f190e2bb4~tplv-k3u1fbpfcp-watermark.image) 刚好最近几天看css多一些，我就想，能不能使用css来实现同样的效果呢？想要用css实现同样的效果，要确保两点： - 可以监听到当前焦点 - 监听到某焦点时改变其他元素的样式说到监听到当前焦点，首先我们想到的是监听当前获取焦点元素的伪类 `:focus选择器` ，它可以选择获得焦点的输入字段，并设置其样式。此处提个问题给各位看官：除了 `:focus选择器` ，还有更适合本场景的css伪类吗？那么当我监听到 `input` 获取了焦点之后，如何去改变其他元素的样式呢？很明显，css没有父级选择器，无法选择父级元素，所以要把img和input放在同级下。我采取改变兄弟元素样式的方式去改变掘金小熊猫样式的显示隐藏。思路有了，下面就是实践了，撸起袖子说干就干，首先去把掘金小熊猫的图扒出来，这里不得不吐槽一下掘金的UI同学，三种状态的小熊猫，图片尺寸竟然是完全不同的，掘金的前端小伙伴分别给这三个图片加了三个尺寸，简直是蜜汁操作~ 有图有真相： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aebd2ebeeb6a41ae817f84b252261628~tplv-k3u1fbpfcp-watermark.image)![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a630df2dbd8e4a368edbc3d64364eb47~tplv-k3u1fbpfcp-watermark.image)![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/460c309f7bc7422d8dbd45a46f0d582e~tplv-k3u1fbpfcp-watermark.image) 吐槽结束的我兴致满满，然后三下五除二我就把页面结构样式来构建出来了： ## :focus伪类结构： ```html ``` 样式： ```scss *{ margin: 0; padding: 0; } body{ background-color: #e9e9e9; } .login-form { width: 370px; margin: 100px auto; padding: 24px; background-color: #fff; position: relative; h2{ color: #333; font-size: 18px; margin-bottom: 24px; } input { outline: none; padding: 10px; margin-bottom: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; box-sizing: border-box; font-size: 16px; } input:focus{ border-color: #007fff; } img{ width: 120; height: 95px; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); } img.greeting, img.blindfold { display: none; } .form-tel{ img.greeting{ height: 113px; } input:focus ~ img.greeting{ display: block; } input:focus ~ img.normal{ display: none; } } .form-password{ img.blindfold{ width: 103px; height: 84px; } input:focus ~ img.blindfold{ display: block; } input:focus ~ img.normal{ display: none; } } .btn-submit{ width: 100%; height: 40px; color: #fff; background-color: #007fff; border-radius: 2px; outline: none; box-sizing: border-box; cursor: pointer; margin-top: 10px; border: none; padding: 8px 20px; } } ``` 放到浏览器，运行一看，好家伙，失败了！ ![GIF 2021-6-7 16-55-42.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b52e4580c41472c9032684cbddd64ee~tplv-k3u1fbpfcp-watermark.image) 原来我不能在第一个input获取焦点的时候，去改变第二个input的兄弟元素样式。所以导致获取焦点的时候，虽然把当前input的兄弟元素图片隐藏了，但是另一个input的兄弟元素并没有隐藏，所以看起来会显示两张图片，而不是我以为的一张图片。并且上面的html代码以及css代码看起来都有大量的冗余，不利于阅读。还记得我在前面提的问题吗？除了 `:focus选择器` ，还有更适合本场景的css伪类吗？ ## :focus-within伪类当然有更适合的伪类啦，那就是 `:focus-within` 伪类，它表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 `:focus` 伪类就会触发它，类似于js中的冒泡。有了这个伪类，我就可以把结构变得更清晰，样式代码也能更加优雅的实现。所以我重新改写了代码：结构： ```html ``` 样式： ```scss *{ margin: 0; padding: 0; } body{ background-color: #e9e9e9; } .login-form { width: 370px; margin: 100px auto; padding: 24px; background-color: #fff; position: relative; h2{ color: #333; font-size: 18px; margin-bottom: 24px; } input { outline: none; padding: 10px; margin-bottom: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; box-sizing: border-box; font-size: 16px; } input:focus{ border-color: #007fff; } img{ width: 120; height: 95px; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); } .form-tel img{ height: 113px; } .form-password img{ width: 103px; height: 84px; } .form-item img{ display: none; } .form-item:focus-within ~ img{ display: none; } .form-item:focus-within { img { display: block; } } .btn-submit{ width: 100%; height: 40px; color: #fff; background-color: #007fff; border-radius: 2px; outline: none; box-sizing: border-box; cursor: pointer; margin-top: 10px; border: none; padding: 8px 20px; } } ``` 看起来结构及样式是不是好了很多？无论从阅读性还是迭代性来说，都有了巨大的提升（此处省略自吹自擂3000字）…… 那么让我们运行到浏览器来看看吧~ ![GIF 2021-6-7 17-06-45.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7ba868689dc4f7ea5b9a083cef094b2~tplv-k3u1fbpfcp-watermark.image) 大功告成啦！！！ ## 后记掘金的小彩蛋还是挺多的，有时高端的样式往往只需要最朴素的实现方式，比如掘金网站实现这个效果的方法是js，说起来，js实现起来可能更灵活，但css实现会更有意思，没有孰是孰非，能达到实现的效果即可。本文旨在提供css彩蛋相关的思路，如果对你有帮助，点个赞就好，如果有错误欢迎指出交流。感谢阅读~ > PS: 今天是参加掘金更文挑战的第7天啦，没有存稿的我，周一依然战战兢兢的努力更文，今天的文章用了将近2小时，有进步，加油吧~ > > 虽然没多少人看，也还是给自己引引流吧~ 更文挑战的文章目录如下： - 2021.06.01 [《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》](https://juejin.cn/post/6968816441801998349) - 2021.06.02 [《如何把css渐变背景玩出花样来》](https://juejin.cn/post/6969128755067355143) - 2021.06.03 [《如何使用SVG制作沿任意路径排布的文字效果》](https://juejin.cn/post/6969449102882897950) - 2021.06.04 [《3大类15小类前端代码规范，让团队代码统一规范起来！》](https://juejin.cn/post/6969839212069650462) - 2021.06.05 [《团队管理之git提交规范：大家竟然都不会写commit记录？｜周末学习》](https://juejin.cn/post/6970275680047071240) - 2021.06.06 [《如何控制css鼠标样式以及扩大鼠标点击区域｜周末学习》](https://juejin.cn/post/6970694281447079944)