1

私のウェブサイト（WordPressを介して実行されている）には、一連のクリック可能な画像のサムネイルがあります。サムネイルにカーソルを合わせると、サムネイルの上に灰色のボックスが表示されます。表示されるこの灰色のボックスはクリック可能なリンクですが、灰色のボックスの80％のみがクリック可能です。

私の問題は、iPhoneがクリックされたときにこのボックスにどのように反応するかです。80％の領域（クリック可能な領域）の外側をクリックすると、灰色のボックスが表示されます。これは素晴らしい。ただし、この80％の領域内の任意の場所をクリックすると、灰色のボックスが表示されるのではなく、自動的にリンクに移動します。これはテキスト形式では少し混乱しているように見えるかもしれないので、私は自分の問題を紹介するために絵を描きました： iPhoneホバーの問題

つまり、iPhoneを使用していて、クリックしたいサムネイルが表示されているとします。80％の領域の外側をクリックすると、灰色のボックスが表示されます。ただし、この80％の領域（実際のリンクである領域）内をクリックすると、表示されるはずの灰色のホバーボックスも表示されずに、外部ソースにリダイレクトされます。これが問題です。コンピューターでの動作と同じように動作させたいので、iPhoneを使用してサムネイルの任意の場所をクリックすると、外部リンクにリダイレクトされるのではなく、灰色のホバーボックスが常に表示されます。これは、ユーザーをiPhoneの外部ソースにリンクするこの80％の領域が設定されてdisplay:noneおり、基本的にユーザーには表示されないためです（サムネイルにカーソルを合わせるまで）。ユーザーは、表示できないリンクをクリックできないようにする必要があります。

では、ユーザーがサムネイルのどこをクリックしても、iPhoneをクリックしたときにホバーグレーのボックスが常に表示されるようにするにはどうすればよいでしょうか。任意の提案や入力は素晴らしいでしょう。

アップデート：

これが灰色のdivを表示させるjqueryです（経由opacity）

$( document ).ready( function() {
$('.entry-image').mouseover(function(){
    //show the box
    $(this).children('.thumbhover').stop().animate({opacity:1},300);
});

$('.entry-image').mouseleave(function(){
    //hide the box
    $(this).children('.thumbhover').stop().animate({opacity:0},500);
});

display:noneまた、CSSのサムホバーdivとshow()jqueryに追加したので、divは表示されないだけでなくopacity:0、それらにカーソルを合わせると、ブロック表示とopacity:1

4

3 に答える 3

0

display:none;クリック可能な領域を作成し、CSSを介してホバーで再び表示できるようにすることで、iPhoneでのこのダブルタップ/タッチホバーの問題を修正しました。そのようです..

.thumbhover {display:none;}

.entry-image:hover .thumbhoverimg {display:block !important;}

そこで、クリック可能な領域を非表示にし、ユーザーが「entry-image」divにカーソルを合わせると再び表示されるようにしました。これにより、iPhoneのホバーの問題が修正されたようです。:)

于 2013-03-02T02:13:34.770 に答える
0

本当に灰色のボックスを表示したい場合は、最初の要素にクリックイベントを設定して、灰色のボックスを表示します。次に、灰色のボックスをもう一度クリックして、どこにでも移動できるようにします...

デモを作成しました：

jsfiddle

HTML：

<div id="box">
   <a class="link one" href="#first">First click</a>
   <a class="link two" href="#second">Second click</a>
</div>

そして、あなたのスクリプト：

$('.one').on('click', function(evt) {
    evt.preventDefault();
    console.log('clicked');
    $('.two').css({
      'top': '0px'
    });
});

$('.two').on('click', function(evt) {
   evt.preventDefault()
   // outside link
   alert("You clicked an outside link!");
});
于 2013-03-02T00:27:59.563 に答える
0

iPhoneユーザーがボックスに触れると、最初に「ホバー」イベントが発生し（したがって、灰色のボックスが常に表示されます）、次に「クリック」イベントが発生するため、ユーザーは80以内であればリンクに移動するようです。％ 範囲。問題は、この2つのイベントが（コンピューターとは異なり）順次かつ即座に発生するため、ページが既に新しいページにリダイレクトされているため、灰色のボックスが表示されないことです。

リンクのonclickイベントにも灰色のボックスを表示してみましたか？つまり、「ホバー」イベントで実行するスタイリング手順をコピーして、リンクの「クリック」イベントに配置します。

あなたのコメントに答えるために更新してください：

ユーザーが次のようなJavascriptを使用してモバイルデバイスを使用しているかどうかを検出できます。

function isMobileDevices() {
    return navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) !== null
}

その場合は別の方法で行動します。たとえば、これはかなり醜いですが、実際の<a>リンクを使用する代わりに、「クリック」イベントでJavascriptを介してリンクを開きますが、モバイルデバイスを使用している場合は、2回目以降の場合にのみリンクを開きます。ユーザーがクリックします。このためには、すべてのボックスのステータスを追跡する必要がありますが、少し面倒です。

おそらくより良い代替策は、タッチイベントについて調査し、それに応じてそれらのイベントを管理することです。

アップデート

あなたのウェブサイトのソースを見ると、あなたがdisplay:none質問で述べたように、あなたが使用していることがわかりません。なるほどopacity:0、違います。display:none不透明度のアニメーション化を開始する必要があるまで、実際に使用してみましたか？

于 2013-03-01T23:31:23.610 に答える