Javascript 尝试为多个包装器创建单个悬停事件

您好，我已经为照片创建了许多相同的容器，当鼠标悬停在上面时，这些容器会将带有特定动画的类应用于照片本身和其中的标题。这段代码在单个容器上运行得很好，但我在翻译它时遇到了问题，因为我无法将它应用于许多不同的容器，而不必为我创建的每个新容器复制和粘贴它。谢谢你的帮助

---

在这些代码行中，#photo1是主包装，而#container是一个div in#photo1中有照片

首先您不应该有多个具有相同id的元素。因此，可以将

id

更改为

类

其次最好使用css（因为这是可能的）。这是一种更快更合适的方式

以下是一个示例

[id^=“photo”]{
显示：内联块；
}
.头衔{
颜色：蓝色；
}
[id^=“photo”]：悬停。标题{
颜色：红色；
}
.集装箱{
最大宽度：100px；
}
[id^=“photo”]：悬停。容器{
最大宽度：150px；
}
.集装箱img{
最大宽度：100%；
}

标题1
标题2
标题3
标题4
标题5

为什么不使用css

：悬停

而不是javascript。然后，您可以将类应用于容器/photo/title，然后您就不必使用jsp了，如果我理解正确的话，有很多

#photo

div？像

#photo1

，

#photo2

等等。？在每一个容器中都有一个div

#container

？这都可以通过CSS实现，只要有一个共同的父对象，您可以将：hover应用到子对象并以这种方式定位。此外，听起来您在重复ID，这些应该是唯一的-考虑使用一个类的东西有很多实例。查看您试图使用的HTML代码可能会有所帮助。拥有像标题和容器这样的硬编码id看起来很难使其可重用，而看不到HTML标记则很难给出更好的答案。我已经在使用不同的id，如photo1、2等。。，所以像你在这里做的那样使用：hover，我只需要为每个id做一个：hover，然后复制/粘贴它，对吗？不，这里有一个很多id的例子，比如photo1，2等等。。。我没有复制任何东西。

$("#photo1").hover(function conton() {
  if($(this).hasClass("containerz")) {
    $("#container").addClass("hovercont");
    $("#title").addClass("hovertitle");
    $("#photo1").addClass("hoverwrapper");
  }
}, function contoff() {
  $("#container").removeClass("hovercont");
  $("#photo1").removeClass("hoverwrapper");
  $("#title").removeClass("hovertitle");
  tornaback();
})