Javascript 我怎样才能只得到我要展示的特定H3，而不是所有H3？

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

HTML:

JS:

---

使用

.next

和

这个

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

您还可以删除
.nextest（.projectImage”）
，因为
此
引用该图像。
使用
。下一步
和
此

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

您还可以删除
.nexist（.projectImage”）
，因为
此
引用该图像。
为什么不使用CSS执行此操作？由于所需的选择器非常陈旧且根深蒂固，您可以执行以下操作：

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

当您将鼠标悬停在项目图像上时，这将在h3中淡出，只要您以这种方式构造它（即ing，然后是h3）。您还可以删除CooleEffect和hiddenh3类，正如我们定义的那样，只针对项目映像之后的h3

这种奇特的过渡效果只能在现代浏览器上使用，但较旧的浏览器会优雅地退化

编辑：SASS/LESS
为什么不使用CSS来实现这一点？由于所需的选择器非常陈旧且根深蒂固，您可以执行以下操作：

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

当您将鼠标悬停在项目图像上时，这将在h3中淡出，只要您以这种方式构造它（即ing，然后是h3）。您还可以删除CooleEffect和hiddenh3类，正如我们定义的那样，只针对项目映像之后的h3

这种奇特的过渡效果只能在现代浏览器上使用，但较旧的浏览器会优雅地退化

编辑：SASS/LESS
非常感谢。我知道这一定很简单。我会检查它的答案，只要它让我@谢谢你的详细回答，这帮助我清理了代码@user3897842——没问题，总是乐于助人！非常感谢。我知道这一定很简单。我会检查它的答案，只要它让我@谢谢你的详细回答，这帮助我清理了代码@user3897842——没问题，总是乐于助人！
.projectImage + h3 {
    transition: opacity 1000ms;
    opacity: 0;
}
.projectImage:hover + h3 {
    opacity: 1;
}

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