1

私の画像にカーソルを合わせると、ボタンが表示されます。問題は、ユーザーがボタンをクリックしようとするとちらつき始め、ユーザーが<img>タグから外れることです。画像の下にテキストがあり、ユーザーがテキストにカーソルを合わせているときにボタンが表示されないようにするため、jQueryhover()セレクターを配置してユーザーがアイテム全体にカーソルを合わせていることを検出できません。<button>ユーザーがクリックしようとしたときに、がちらつかないようにするにはどうすればよいですか。

http://jsfiddle.net/DEQkk/

​&lt;div class="item">
  <img src="http://www.placehold.it/250x100">
  <button>More Info</button>
  <p>Description</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​button { position:absolute; top:20px; left:90px; display:none; }​

​$('.item img').hover( function() {
        $(this).parent().find('button').show();
    }, function() {
        $(this).parent().find('button').hide();
    }
);​
4

2 に答える 2

2

マウスがボタンに入る、またはボタンにカーソルを合わせると画像から離れるため、ちらつきます。これを修正するには、イベントハンドラーを<div>：に移動します。

$('.item div').hover( function() {
        $(this).find('button').show();
    }, function() {
        $(this).find('button').hide();
    }
);​

作業デモ。

編集：画像とその中に折りたたまれたボタンを使用して、<div>内部を配置します。.item

<div class="item">
   <div>
      <img src="http://www.placehold.it/250x100">
      <button>More Info</button>
   </div>
</div>​
于 2012-11-23T17:47:55.270 に答える
2

画像とボタンにホバー効果を適用します。

$('.item img, .item button').hover( function() {
        $(this).parent().find('button').show();
    }, function() {
        $(this).parent().find('button').hide();
    }
);
于 2012-11-23T17:48:11.323 に答える