javascript - 我怎样才能只获得我悬停的特定 H3 而不是全部？

Question

当用户将鼠标悬停在特定图像上时，我试图让文本出现在每个图像上。当用户将鼠标悬停在一张图片上时，我不希望每张图片的所有文本都出现。我有它，只有一张照片变得不透明，但现在当鼠标悬停在任何图像上时，文本会显示在每张图像上。

HTML:

<div class="image">
  <img class="projectImage" src="images/peralta.png" alt="">
  <h3 class="hiddenH3">This is a test!</h3>
</div>

SCSS:

.image {
  position: relative;
  width: 100%;
  .projectImage {
    width: 100%;
    transition: all 0.5s ease-in;
  }
  .hiddenH3 {
    display: none;
    position: absolute;
    top: 45%;
    width: 100%;
  }
}

JS:

$('.projectImage').on("mouseover", function() {
  $(this).closest('.projectImage').addClass("coolEffect");
  $('.hiddenH3').fadeIn(1000);
  });
$('.projectImage').on("mouseout", function() {
  $(this).closest('.projectImage').removeClass("coolEffect");
  $('.hiddenH3').fadeOut(1000);
  });

Answer 1

使用 .next 和 this

$('.projectImage').on("mouseover", function() {
    $(this).addClass("coolEffect");
    $(this).next(".hiddenH3").fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
    $(this).removeClass("coolEffect");
    $(this).next(".hiddenH3").fadeOut(1000);
});

您还可以删除 .closest(".projectImage")，因为 this 引用该图像。