javascript - 使标题弹出窗口同时出现在多个元素上

Question

我在页面上有狗和猫的图像。将鼠标悬停在图像上时，会弹出标题，例如'这是一只叫汤姆的猫'”，或者对一只狗，'这是一只叫菲多的狗'”。到目前为止，一切都很好。我想要做的是:将鼠标悬停在猫图像上时，不仅会为该图像弹出标题，还会为我指定的组中的其他图像弹出标题，例如所有的猫图像。因此，如果页面上有三张猫图片，我将鼠标悬停在其中一张上，则所有三张图片都会显示各自的标题属性。我想解决这个问题的方法在于 Javascript、JQuery、CSS，但我不知道从哪里开始。甚至不确定我想要的是否可行。建议表示赞赏。

Answer 1

可以给组中的元素一个一致的data-group值，然后使用jQuery的$.hover()检测当前悬停元素所在的组，在同一组的其他元素上触发标题文本弹出窗口。这是一个例子。

$items = $('.item');
$items.hover(function() {
  var group = $(this).data('group');
  $("[data-group='"+group+"']").addClass('active');
},function() {
  $items.removeClass('active');
})

* {margin:0;}
img {
  max-width: 100%;
}
.item {
  float: left;
  max-width: 200px;
  position: relative;
}
h4 {
  position: absolute;
  background: white;
  padding: .25em 0;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: none;
}
.active h4 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-group="fonz">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <h4>text</h4>
</div>
<div class="item" data-group="fonz">
  <img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg">
  <h4>text</h4>
</div>
<div class="item" data-group="cat">
  <img src="http://www.bharatint.com/img/categories/our-cat-shop-image.png">
  <h4>text</h4>
</div>
<div class="item" data-group="cat">
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Subpage-Hero-Images/150327_Hero_kit.ashx">
  <h4>text</h4>
</div>