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是指该图片。

Answer 2

你为什么不用CSS做这件事？由于所需的选择器非常陈旧和根深蒂固，你可以这样做：

.projectImage + h3 {
    transition: opacity 1000ms;
    opacity: 0;
}
.projectImage:hover + h3 {
    opacity: 1;
}

当您将鼠标悬停在项目图像上时，只要您以这种方式构建它（即，然后是h3），这将在您的h3中消失。你也可以删除类cooLEffect和hiddenh3，因为我们通过仅定位项目图像之后的h3来定义它。

花哨的过渡效果仅适用于现代浏览器，但较旧的浏览器会优雅地降级。

编辑：SASS / LESS

.image {
    .projectImage {
        & + h3 {
            transition: opacity 1000ms;
            opacity: 0;
        }
        &:hover + h3 {
            opacity: 1;
        }
    }
}

我怎样才能得到我正在徘徊的特定H3以显示而不是全部？

2 个答案:

编辑：SASS / LESS