CSS Pseudo Active :为什么 :active 背景位置移动在 IE 中不起作用?

发布于 2024-11-02 21:24:33 字数 266 浏览 4 评论 0原文

示例: http://jsfiddle.net/9BygQ/5/

如果你在 Chrome 中测试这个例子,你会看到在 :active 上按钮显示为按下状态。 为什么活动伪状态在 IE 中似乎没有任何效果?

这个问题已经困扰我一段时间了现在...

希望得到一些帮助!

干杯

EXAMPLE : http://jsfiddle.net/9BygQ/5/

If you test the example in Chrome you will see that on :active the button appears pressed in. Why does the active pseudo state not seem to have any effect in IE?

This problem has been bothering me for a while now...

Love some help!

Cheers

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

像你 2024-11-09 21:24:33

这里至少有一个提示:

您可能已经在 IE 上看到了 :active 在按钮右侧触发。即 10px 的右内边距区域。因此,当您的 位于 上方时,IE 似乎会激活 :hover 但不会激活 :active。 (我可能是错的,我只能通过点击到处才发现这种行为:))

所以我尝试反转 并且它几乎可以工作(图像右侧仍然有问题)

这是新代码

HTML SEXY BUTTON

CSS span  a{  background:url('http://thebeer.co/imgs/UI/sprite.png') right -548px  no-repeat; padding-right:10px;  color:#CCC; font-size:12px;}

span{width:200px;display:block;background:url('http://thebeer.co/imgs/UI/sprite.png') -1348px -475px  no-repeat; padding:10px 11px;  padding-right:2px; text-align:center; font-family:medium; text-transform:uppercase; letter-spacing:1px;}

a:hover{color:#F97216;}
a:active{background-position:right -584px; color:#666;  cursor:pointer;}
a:active > span  {background-position:-1348px  -511px ;}

我不确定这会解决您的问题,但我希望它会有所帮助:)

Here's at least a hint:

you might have seen that on IE the :active triggers on the right side of the button. i.e. the 10px padding-right area. So it seems that while your <span> is above your <a>, IE will activate the :hover but not the :active. (i may be wrong, i found this behaviour only by clicking everywhere :) )

So i tried to reverse <a> and <span> and it's almost working (still have a problem with the image right side)

Here is the new code

HTML <a><span>SEXY BUTTON</a></span></a>

CSS span  a{  background:url('http://thebeer.co/imgs/UI/sprite.png') right -548px  no-repeat; padding-right:10px;  color:#CCC; font-size:12px;}

span{width:200px;display:block;background:url('http://thebeer.co/imgs/UI/sprite.png') -1348px -475px  no-repeat; padding:10px 11px;  padding-right:2px; text-align:center; font-family:medium; text-transform:uppercase; letter-spacing:1px;}

a:hover{color:#F97216;}
a:active{background-position:right -584px; color:#666;  cursor:pointer;}
a:active > span  {background-position:-1348px  -511px ;}

I'm not sure this will solve your problem but i hope it will help :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文