CSS - 画像スプライト：アクティブではありません。つまり、

Question

これは私のコードです。

<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div> 

任意のアイデアください：アクティブは、単にこれはhtmlです

a.Button span { 
background: transparent url('images/form_sprite.png') no-repeat 0 0; 
display: block; 
height:45px; 
line-height: 30px; 
padding: 7px 0 5px 20px; 
color: #fff; 
background-position: 0 -44px; 
} 

a.Button { 
background: transparent url('images/form_sprite.png') no-repeat top right; 
display: block; 
float: left; 
height: 45px; 
margin-right: 6px; 
padding-right: 27px; 
text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
} 

a.Button:hover span { 
background-position: 0 -136px; 
} 

a.Button:hover { 
background-position: right -90px; 
} 

a.Button:active span { 
background-position: 0 -225px; 
} 

a.Button:active { 
background-position: right -181px; 
} 

発生しませんか？

Answer 1

あなたのCSSでa.Button:activeをa.Button span:activeに変更してみてください。それは:active CSSを発射しているようだが、私のためにクロムでまだ動作している。

Answer 2

擬似クラスは、ユーザーがを直接クリックしてそのオブジェクト上でをクリックしたときにのみ発生します。この場合、リンク。子オブジェクト（スパン）をクリックしている場合、リンクのアクティブなイベントは発生しません。

Aninemityが言っているように、スタイルをspan:active（これを行う適切な方法）に適用できます。しかしIE6/7では、:activeはリンクのためにのみ発火します。 IE6/7サポートが必要な場合は、スパンを取り除くための方法を見つける必要があります。