Question

我的页面上有许多引导卡，卡片中包含一个人的图像。我想将WHOLE卡悬停，并将图像从黑白变为彩色。

我使用了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

您需要参考相对于悬停的卡片图像元素。通过使用Error: geom_point requires the following missing aesthetics: x, y作为选择元素的上下文，您仅将目标定位在悬停的卡片中。

ggplot(tmp.tidy) +
  geom_count(aes(pos.end, -log10(value), color = key)) +
  facet_wrap(~key, scales = "free") +
  guides(size = FALSE) +
  geom_point(data = subset(tmp.tidy, is_highlight == "yes"), aes(x =  pos.end, y = -log10(value)),color = "purple", size = 2) +
  geom_label_repel(data = subset(tmp.tidy, is_annotate == "yes"),     aes(aes(x = pos.end, y = -log10(value), label = pos.end), size = 2)
  theme(
panel.background = element_rect(fill = "white", color = "grey90"),
panel.spacing = unit(2, "lines")
  )

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

this

mousenter mouseleave一次只影响一张卡

1 个答案: