如何使 :active 伪类对子元素无效？

[Twinkle]

现在有这样的结构：

<div class="wrapper">
  <div class="other"></div>
  <div class="link">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

.wrapper:active {
  transform: scale(0.9)
}

父元素 .wrapper 点击后能够被正常缩放，但是 .link 下的几个链接也被缩放后移位，会导致无法点中，如何解决这种情况？或者说就是点击链接时不进行缩放？

[Twinkle]

顶下。

[jjplay]

因为A标签是叠加在wrapper之上的，如果用:hover就会执行

[jun4rui]

我一般把两层分开，链接单独放另外一个div去就好了

[Twinkle]

@jjplay 谢谢～ “如果用:hover就会执行” 这句是什么意思呢，没看懂

[Twinkle]

@jun4rui 不太想改变现在的结构，如果实在没办法只好这样啦，谢谢

[MaiCong]

请搜索 css pointer-events

[Twinkle]

@MaiCong 似乎不行啊，设置为none的话没法点击了，auto的话还是会响应active的缩放...

[MaiCong]

@Twinkle 可以换个思路：
.wrapper:active .link {
transform: scale(1);
}

[Twinkle]

@MaiCong 试过，这样整个wrapper还是会缩放的。。

[sneezry]

楼主要不然把需求细化下说说，看看能不能用其他交互方式，scale缩放后元素位置变了，点不到也是在意料之中的呀

[MaiCong]

@Twinkle 浏览器有个设置项叫最小字体 chrome默认貌似是12px 这就是字体最小能缩放到12px 然后宽度超过就换行了……

[Twinkle]

@sneezry 要求就是不让 .link 缩放

[Twinkle]

@MaiCong 有点.. 极端啊>.<

[sodatea]

```css
.wrapper:active {
transform: scale(0.9);
}
.wrapper:active .link {
transform: scale(1.11);
}
```

[sneezry]

@Twinkle
@sodatea 的方法是正确的，要想不缩放子元素，那么缩小是多少就再放大回来。

要求就是不缩放link误解我的意思了。用scale肯定会模糊，那效果应该非常酸爽~可不可以通过改变背景来模拟缩放效果？父系元素想达到怎样的交互效果导致楼主想到了用scale去实现？这个才是问题的重点，不如把最初的问题拿出来讨论，而非是楼主既定条件下的命题作文啊~

[Twinkle]

@sodatea 么么哒～ 貌似还会有些问题，.other元素的scale导致.link还是往上缩，虽然自己本身是不缩放了....

[Twinkle]

@sneezry 嗯，是我的锅。想让元素有个点击时被选中的视觉效果，就想到了scale...

[baconrad]

@Twinkle
http://codepen.io/anon/pen/yNYrwP

[Twinkle]

@baconrad 谢谢！不过测试发现，只有 :after 是被缩放的，所有子元素本身都不会变了。。

[sneezry]

@Twinkle 我懂了，按钮按压的效果，用shadow

[baconrad]

@Twinkle
除了 .link 外，所有子元素仍要保持縮放對嗎。。？
那將
.wrapper:active:after
改成
.wrapper:active:after,
.wrapper:active :not(.link)
這樣呢？

[Twinkle]

@sneezry 好的，我试试 shadow >.<

[Twinkle]

@baconrad
抱歉今天才有时间来测试。
加了 .wrapper:active:not(.link) 之后还是会缩放

[sneezry]

@Twinkle 那啥，我再确认下，你是想提现z轴位置变化的效果吧，z轴变化可以从大小上提现，就是你最初的想法，也可以通过阴影距离体现对吧，变化不大的情况下，我们可以忽略大小变化只更改阴影距离的，因为改大小真的很烦~

[Twinkle]

@sneezry 没错就是这样，谢谢嗯 ╮(￣▽￣)╭