0

要素でこの奇妙な問題を発見しました<a>。「プッシュダウン」アニメーションを備えたCSSのみのボタンを作りたかったのです。

多かれ少なかれこのようなもの：

.button:active {
position: relative;
top: 10px;
}

問題は、テキストの下でマウスダウンを行い、テキストがポインターの下に移動したときに離すと、リンクが機能しないように見えることです (アニメーションは正しく実行されますが、onclick または href は機能しません)。このフィドルで「バグ」またはそれが何であれ見ることができます：

http://jsfiddle.net/H9RgD/

パディングを使用してアニメーションを作成するなど、すでにさまざまなことを試しましたが、まだ機能しません。Chrome 22 (今日の最新バージョン) にはないことを確認できます。なぜこれが起こるのですか？この問題を回避して、css のみのボタンをアニメーション化するにはどうすればよいですか?

4

1 に答える 1

0

「なぜ」には答えられません（バグかもしれないと思います）。Chrome で以前に同様の問題に遭遇したことを思い出し、ここで提供する同様の回避策を思いついたようです。どういうわけか、疑似要素の「オーバーレイ」を追加すると、全体が「クリック可能」になります。あなたの場合、 の上部をクリックしても登録されていないことに気付きましたが、その状態で に調整divを加えると、それも解決されたようです。top:before:active

このフィドルには有効な解決策があるようです。HTMLはあなたのフィドルと同じです（アラートにコンテンツを追加したことを除いて）：

HTML

<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>​

CSS

.tabs-container div{
    display: inline-block;
    background: whitesmoke;    
    padding-bottom: 5px;
    font-size: 25px;
    border-bottom: 5px solid grey;
    position: relative;
}

.tabs-container div:active{
    top: 10px;
    border-bottom: 0;
}

.tabs-container div:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.tabs-container div:active:before {
    top: -10px;
}

</p>

于 2012-10-23T03:21:30.783 に答える