关于 css transition 与子元素选择器的问题,这是 bug 还是特性?

2017-11-15 12:47:00 +08:00
 codehz

codepen 演示

文字描述和截图可以看我在知乎的问题: https://www.zhihu.com/question/68148779

目前在 chrome 最新版桌面版和 android 版上能发现这个行为,但是 edge/ie 没有这个行为

2241 次点击
所在节点    前端开发
3 条回复
sunjourney
2017-11-15 13:00:10 +08:00
chrome 的实现应该是对的,因为 transition 有 transitionend 事件,在移出鼠标后,在这个事件执行前,.c 的颜色还是是红的,.a 是一层层 inherit 下来的,表现合理。
想要同时变化应该是 .c:hover .a { color: red; }, .a { color: white; },不应该依靠 inherit
codehz
2017-11-15 13:10:00 +08:00
@sunjourney #1 我也是这么想的,但是看起来并不能依赖这个特性。。。至少和 edge/ie 的行为相比还是不一致的。。。不过说起来这个效果还是挺不错的。。但是如果要更多的定制的话,看起来只能用 css custom properties+calc 来实现层级递进效果。。。
sunjourney
2017-11-15 13:16:08 +08:00
当做 hack 有目的地这样实现还是不错的,可惜又不兼容 IE 了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/406561

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX