Question

我有一个定位多个图片的悬停方法，当您悬停图片时，它应该只在该悬停的图片上添加预览图标，但它会在每个元素上发生，我是Javascript的新手/ jQuery并且无法找到一种方法，有人可以帮助我吗？

这是我的实际 jQuery 代码：

$mysql_qry = "UPDATE user_data SET name = '$name'";

更新v1

所以现在它正在工作，但是如果将鼠标悬停在图像上，然后将鼠标悬停在显示的预览图标上，它就不会绑定图像，它们会像两个不同的图像一样工作（使用Chrome尝试代码）上面网站内的开发工具）：

// Make images smaller
$('.card').find('p > img').css({
  'width': '160px',
  'height': '118px'
}).parent().css('text-align', 'center');

// Add preview icon into DOM
$('.card').find('p:last-child').prepend("<img class='preview-icon' src='http://www.iconsfind.com/wp-content/uploads/2015/11/20151116_564931d273df6.png' width='80' height='80' />");

// Add style to our preview image
$('.preview-icon').css({
  'position' : 'absolute',
  'z-index' : '99999',
  'left' : '50%',
  'top' : '50%',
  'bottom' : 'auto',
  'right' : 'auto',
  'transform' : 'translateX(-50%) translateY(-50%)'
}).hide();

// On hover add/remove style
$('.card').find('p > img').hover(function() {
  $('.card').find('p > img').css({
    'opacity' : .2,
    'transition' : 'all 0.2s',
    '-webkit-transition' : 'all 0.2s',
    'cursor' : 'pointer'
  });

  $('.preview-icon').show();
}, function() {
  $('.card').find('p > img').css({
    'opacity' : 1,
  });

  $('.preview-icon').hide();
});

谢谢！

Answer 1

您正在悬停处理程序

内执行以下操作

$('.card').find('p > img')

这是重新找到所有图像，而不是使用悬停或关闭的图像。而不是重复此选择器，而是使用$(this)。

您还可以将预览图标附加到卡片上。所以要访问相关的预览图标。

$(this).closest('.card').find('.preview-icon').hide();

Answer 2

您定位的是来自每个p > img的后代.card元素，而不仅仅是已悬停的元素。

$('.card').find('p > img').css

应该是

$(this).css

您可以阅读更多信息here。

jQuery悬停方法触发多个元素

2 个答案: