Question

$("#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();
})

嗨，我为照片创建了许多相同的容器，当它们悬停在应用具有特定动画的类时，照片本身和内部的标题。这段代码适用于单个容器，但是我在翻译它时遇到了问题，这种方式允许我将它应用到许多不同的容器中，而不必为我创建的每个新容器复制和粘贴它。谢谢你的帮助

在这些代码行中，＃photo1是主要的包装器，而#container是＃photo1里面的div，里面有照片

Answer 1

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

其次最好在css中执行（因为它可能）。这是更快，更合适的方式。

以下是

的示例

＆＃13;

[id^="photo"] {
  display: inline-block;
}

.title {
  color: blue;
}
[id^="photo"]:hover .title {
  color: red;
}

.container {
  max-width: 100px;
}
[id^="photo"]:hover .container {
  max-width: 150px;
}
.container img {
  max-width: 100%;
}

＆＃13;

<div id="photo1">
  <div class="title">Title 1</div>
  <div class="container"><img src="https://proxy.topixcdn.com/ipicimg/1N8II1A857Q5NONT-cp0x134x1600x932-fill810x415x" /></div>
</div>
<div id="photo2">
  <div class="title">Title 2</div>
  <div class="container"><img src="https://proxy.topixcdn.com/ipicimg/1N8II1A857Q5NONT-cp0x134x1600x932-fill810x415x" /></div>
</div>
<div id="photo3">
  <div class="title">Title 3</div>
  <div class="container"><img src="https://proxy.topixcdn.com/ipicimg/1N8II1A857Q5NONT-cp0x134x1600x932-fill810x415x" /></div>
</div>
<div id="photo4">
  <div class="title">Title 4</div>
  <div class="container"><img src="https://proxy.topixcdn.com/ipicimg/1N8II1A857Q5NONT-cp0x134x1600x932-fill810x415x" /></div>
</div>
<div id="photo5">
  <div class="title">Title 5</div>
  <div class="container"><img src="https://proxy.topixcdn.com/ipicimg/1N8II1A857Q5NONT-cp0x134x1600x932-fill810x415x" /></div>
</div>

＆＃13;

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

1 个答案: