同時に複数の要素にタイトルポップアップを表示させる

Question

私はページに犬と猫の画像を持っています。画像上にカーソルを置くと、タイトルがポップアップ表示されます。 「これはトムと呼ばれる猫です」、あるいは「犬と呼ばれる犬」です。ここまでは順調ですね。私がしたいのは、猫の画像にカーソルを置くと、タイトルはその画像だけでなく、指定したグループ内の他の画像にも表示されます。すべての猫の画像。したがって、ページに3つの猫の画像があり、そのうちの1つにマウスカーソルを合わせると、3つすべてのタイトル属性が表示されます。私はこれを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>