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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3488 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在有这样的结构：

<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 下的几个链接也被缩放后移位，会导致无法点中，如何解决这种情况？或者说就是点击链接时不进行缩放？

div

class=

wrapper

25 条回复 • 2015-05-08 12:59:27 +08:00

Twinkle

2015-05-07 19:11:02 +08:00

顶下。

jjplay

2015-05-07 19:55:12 +08:00

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

jun4rui

2015-05-07 20:02:23 +08:00

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

Twinkle

2015-05-07 20:06:15 +08:00

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

Twinkle

2015-05-07 20:09:08 +08:00

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

MaiCong

2015-05-07 20:12:56 +08:00 via iPhone

请搜索 css pointer-events

Twinkle

2015-05-07 20:27:11 +08:00

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

MaiCong

2015-05-07 20:32:02 +08:00 via iPhone

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

Twinkle

2015-05-07 20:37:14 +08:00

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

sneezry

2015-05-07 20:40:15 +08:00 via iPhone

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

MaiCong

2015-05-07 20:44:31 +08:00 via iPhone

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

Twinkle

2015-05-07 21:20:16 +08:00

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

Twinkle

2015-05-07 21:22:34 +08:00

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

sodatea

2015-05-07 21:41:10 +08:00

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

sneezry

2015-05-07 21:57:24 +08:00 via iPhone

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

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

Twinkle

2015-05-07 22:13:31 +08:00

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

Twinkle

2015-05-07 22:15:49 +08:00

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

baconrad

2015-05-07 22:19:50 +08:00

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

Twinkle

2015-05-07 22:46:16 +08:00

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

sneezry

2015-05-07 22:55:28 +08:00 via iPad

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

baconrad

2015-05-07 23:32:14 +08:00

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

Twinkle

2015-05-08 10:40:07 +08:00

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

Twinkle

2015-05-08 10:50:50 +08:00

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

sneezry

2015-05-08 11:23:02 +08:00 via iPhone

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

Twinkle

2015-05-08 12:59:27 +08:00

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