1

私のコードでは、画像にカーソルを合わせると、その画像の上に「.pin_it」のクラスを持つ新しいリンクが作成されます。ユーザーがマウスを画像から離すと、.pin_it が非表示になります。ただし、新しい .pin_it の上にマウスを移動すると、表示されたままになります。

私はこれをすべて機能させました。問題は、マウスを .pin_it の上に置いた後、画像の外に移動すると .pin_it が非表示になるはずですが、そうではないことです。次に、ホバーして戻ると、別の .pin_it が追加されますが、マウスアウトの動作はまったく考慮されなくなります。

私は何を間違っていますか？

JS フィドル -> http://jsfiddle.net/kthornbloom/rKZK5/2/

コード：

$('img').hover(
function() {
  var imgWidth = $(this).width();
  var imgPosition = $(this).offset();
  if(imgWidth > 300) {
      $('body').append('<a href="#" class="pin_it">Pin It</a>');
      $('.pin_it').css(imgPosition);
  }
  else {
      // Do Nothing
  }
}, function() {
  var isHovered = $('.pin_it').is(":hover");

  if (isHovered == true) {
      //Do nothing
  } else {
    $('.pin_it').remove();       
  }
});
4

1 に答える 1

2

次の方法で、マークアップを再検討できます。

  • 画像のラッパーを追加し、その中にピンボタンを挿入して非表示に設定する
  • ラッパーにカーソルを合わせると、ボタンが表示されます
  • ラッパーを離れるときはボタンを非表示にします

コード：

$('#imgWrapper').hover(

function () {
    var imgWidth = $(this).width();
    var imgPosition = $(this).offset();
    if (imgWidth > 300) {
        $('.pin_it').css(imgPosition).show();
    } else {
        //
    }
}, function () {
    $('.pin_it').hide();
});

要素の追加/削除による大量の DOM 操作に問題はなく、コードはシンプルに見えます。

デモ: http://jsfiddle.net/IrvinDominin/fzM7k/

于 2013-10-18T16:58:02.043 に答える