爱站程序员基地css显示/隐藏
以前我们总是通过js去实现一些简单的隐藏和显示 自从前后端开始分离后更多人把这些能用css实现的东西 放在了前端 如账号密码的判断等
现在我们有这样的代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>属性选择器</title></head><body><ul><li>Lorem ipsum dolor sit amet.</li><li>Quia modi nihil saepe labore.</li><li>Placeat vero commodi ab incidunt?</li><li>Repellendus eum error adipisci quod?</li><li>Repudiandae ipsam iusto dolor dicta?</li><li>Animi quae ut explicabo quibusdam.</li><li>Quisquam sapiente dignissimos voluptas iusto.</li><li>Aperiam qui enim at reprehenderit!</li><li>Suscipit, commodi quibusdam. Nemo, ipsum!</li><li>Repellat adipisci voluptatum hic reprehenderit.</li><li>Quo est dolores et commodi?</li><li>Eum asperiores quae eligendi illum?</li><li>Pariatur impedit quisquam illum sint.</li><li>Aut nostrum tenetur illum repudiandae.</li><li>Ducimus quam quasi odio officia.</li><li>Deserunt aliquam molestiae at tenetur?</li><li>Voluptates iusto quaerat ipsum adipisci.</li><li>Saepe debitis perspiciatis ducimus esse!</li><li>In omnis itaque cupiditate ab.</li><li>Necessitatibus dicta neque officiis alias.</li></ul></body></html>
现在的需求就是鼠标悬浮上去隐藏下一个li标签
那我们要怎么做呢？
这就要涉及到css的一个兄弟选择器 +
在代码中加入
<style>ul li:hover+li{visibility: hidden;}</style>
这样当我们hover当前项的时候 就隐藏了下一项
红色箭头是鼠标悬浮的位置
这样我们就实现了一个简单的显示及隐藏虽然没啥用
全部代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>属性选择器</title><style>ul li:hover+li{visibility: hidden;}</style></head><body><ul><li>Lorem ipsum dolor sit amet.</li><li>Quia modi nihil saepe labore.</li><li>Placeat vero commodi ab incidunt?</li><li>Repellendus eum error adipisci quod?</li><li>Repudiandae ipsam iusto dolor dicta?</li><li>Animi quae ut explicabo quibusdam.</li><li>Quisquam sapiente dignissimos voluptas iusto.</li><li>Aperiam qui enim at reprehenderit!</li><li>Suscipit, commodi quibusdam. Nemo, ipsum!</li><li>Repellat adipisci voluptatum hic reprehenderit.</li><li>Quo est dolores et commodi?</li><li>Eum asperiores quae eligendi illum?</li><li>Pariatur impedit quisquam illum sint.</li><li>Aut nostrum tenetur illum repudiandae.</li><li>Ducimus quam quasi odio officia.</li><li>Deserunt aliquam molestiae at tenetur?</li><li>Voluptates iusto quaerat ipsum adipisci.</li><li>Saepe debitis perspiciatis ducimus esse!</li><li>In omnis itaque cupiditate ab.</li><li>Necessitatibus dicta neque officiis alias.</li></ul></body></html>
