jquery - mouseenter mouseleave 一次只影响一张卡片

Question

我有一个页面，上面有许多 Bootstrap 卡片，卡片中有一个人的图像。我想悬停整张卡片，让图像从黑白变为彩色。

我使用了 css 灰度和悬停效果很好，但只有当悬停在图像上而不是卡体上时。我想我会尝试 jquery 并做一个在某种程度上起作用的 mouseenter mouseleave 函数。问题是当我将一个卡片主体悬停在页面上时，页面上的每个图像都从黑白变为彩色，考虑到所有图像都共享同一类，这是有道理的。我只想将悬停的卡片更改为颜色。

HTML:

<div class="card mt-6 shadow filter sales-filt w-25">
  <div class="">
    <img src="images/alecPeople.png" class="card-img" alt="">
  </div>
  <div class="card-body">
    <h6 class="card-title mb-0 text-uppercase">Alec Koyer</h6>
    <p class="card-text mb-3 people-p text-green fw-bold">Sales</p>
    <button class="js-video-button btn-people--launch" data-video-id='333' data-channel="vimeo"><i class="fas fa-play"></i></button>
  </div>
</div>

JS:

$('.card-body').on('mouseover mouseout',function(){
  $('.card-img').toggleClass('card-img-hover')
});

悬停卡体部分，图像变色但只有悬停的卡体

Answer 1

您需要引用与悬停元素相关的卡片图像元素。通过使用 this 作为选择元素的上下文，您可以仅针对悬停卡片中的元素。

$('.card-body').on('mouseover mouseout',function(){
  var cardImg = $(this).find('.card-img');
  cardImg.toggleClass('card-img-hover');
});

这没有用，但它为我指明了正确的方向，非常感谢! :) 我最终不得不选择整个卡片元素，而不仅仅是卡片主体:

$('.card').on('mouseover mouseout',function(){
    var cardImg = $(this).find('.card-img');
    cardImg.toggleClass('card-img-hover');
  });