V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
codehz
V2EX  ›  前端开发

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

  •  
  •   codehz ·
    CodeHz · 2017-11-15 12:47:00 +08:00 · 2370 次点击
    这是一个创建于 2593 天前的主题,其中的信息可能已经有所发展或是发生改变。

    codepen 演示

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

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

    3 条回复    2017-11-15 13:16:08 +08:00
    sunjourney
        1
    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
        2
    codehz  
    OP
       2017-11-15 13:10:00 +08:00
    @sunjourney #1 我也是这么想的,但是看起来并不能依赖这个特性。。。至少和 edge/ie 的行为相比还是不一致的。。。不过说起来这个效果还是挺不错的。。但是如果要更多的定制的话,看起来只能用 css custom properties+calc 来实现层级递进效果。。。
    sunjourney
        3
    sunjourney  
       2017-11-15 13:16:08 +08:00
    当做 hack 有目的地这样实现还是不错的,可惜又不兼容 IE 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2544 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:23 · PVG 19:23 · LAX 03:23 · JFK 06:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.