时间戳

首页 > 解决方案 > mouseenter mouseleave 一次只影响一张卡

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

问题描述

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

我使用 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')
});

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

标签： jqueryhtmlcss

解决方案

您需要参考相对于悬停的卡片图像元素。通过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');
  });

推荐阅读