0

ここに私のフィドルがあります: *見栄えを良くするために更新されました: http://jsfiddle.net/fmYpE/1/

<div class="block">
    <img src="//placekitten.com/240/240" alt="Kitty" />
    <div class="block-overlay">
        <ul>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
            <li><a href="//placekitten.com/10/10">Link</a></li>
        </ul>
    </div>
</div>
.block { position: relative; }

.block-overlay {
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}

.block:hover > .block-overlay { opacity: 1; }

iOS やその他のタッチ デバイスでは、リンクが非表示になっている画像をタップすると、リンクがクリックとして登録され、リダイレクトされます。

どうにかしてこれが起こらないようにする方法が必要です。私の実際のコードでは、正方形の画像があり、その下に非表示にすると、ソーシャル共有 Web サイトからのユーザー データが表示されます: ユーザー名、アバター、ステータス更新など。

これらはリンクでいっぱいです。画像をタップして、オーバーレイ div トランジション position:absolute を画像の上に配置してから、リンクをタップ/クリックして、トランジションが完了する前にリンクをたどらないようにしたいと考えています。

私は疑似クラス、:focus、:active の組み合わせを試しました。Modernizr、.touch、.no-touch も試しました。

ここでこの記事に出くわしましたが、リンクではなく静的テキストについてのみ話しました... http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ (スクロールして結論の段落）

どんな助けでも、いつもとても感謝しています、ありがとう。

4

1 に答える 1