TEL:400-8793-956
当前位置:网站讲堂

CSS 社区对悬停育儿的思考

提问者: 近期获赞: 浏览人数: 发布时间:2022-04-01 14:12:11

 一个人最近在一个大型在线设计社区分享了一篇风格指南帖子。这篇简短的文章是关于使用 :not CSS 选择器来对悬停时的兄弟姐妹进行风格化。根据文章作者的说法,设计者通常需要使用 JavaScript 来设计他们想要与之交互的元素的所有兄弟元素。但是,可能有更好的方法来做到这一点,只使用 CSS。

 
简而言之,这个想法是针对父级的 :hover 。下一步是定位除用户悬停的孩子之外的所有孩子。代码为:.parent:hover .child:not(:hover)。除了用户用光标悬停在上面的样式之外,该样式会影响所有子样式。
 
发布此消息的人想知道其他设计师对此有何看法。一个人看了看,并添加了关于在 Code Pen 上尝试代码的评论,但它不起作用。他们注意到父悬停部分触发了颜色变化,但子悬停部分根本没有做任何事情。
 
另一个人说,这段代码不是一个完美的解决方案。当项目之间存在间隙时,所有项目都会受到样式的影响。一个人建议无法让代码在 Code Pen 上工作的编码人员尝试消除差距并填充孩子。一些人想知道这怎么可能是一个问题。
 
其他人说他们使用父母的悬停来设置孩子的样式。他们使用的代码是这样的: .parent :hover .child; .child:悬停。该人说要保持该顺序,以便只有悬停的孩子不会被所有孩子的样式覆盖。有人试过了,说不行。他们说它把所有的子部门都变成了红色,但是悬停的孩子没有变成蓝色。该人确实使用了文章中的代码,并且效果很好。
上一篇: 尝试这些划分页面空间的方法
下一篇: 如何通过图像模糊效果影响您的网站访问者