Question

我在页面上有狗和猫的图像。将鼠标悬停在图片上时，标题会弹出，例如＆＃39;这是一只叫做汤姆的猫，或者是一只狗，这是一只叫做Fido＆＃39;＆＃34;的狗。到现在为止还挺好。我想要做的是：将鼠标悬停在猫图像上时，标题不仅会弹出该图像，还会弹出我指定的组中的其他图像，例如：所有的猫图像。因此，如果页面上有三个猫图像，并且我将鼠标悬停在其中一个上，则三个猫图像将显示各自的标题属性。我想这个解决方案在于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>

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

1 个答案: