javascript - マウスがタイルの上にあるときの CSS テンプレートの問題

Question

やりたいことは次のとおりです。複数のタイルをフィードする汎用テンプレートを 1 つ作成しました。マウスをタイルの上に置くと、タイルの上にアイコンが付いた透明な黒い四角形が表示されます。それは正常に動作しますが、問題は、同じページでテンプレートを使用して複数のタイルを取得したときです。マウスがどのタイルの上にあるかに関係なく、透明な黒い四角は常に最初のタイルの上にあります。

これが私のコードです。CSS/JavaScript の混合コードです (動作します)。JS 関数を作成しようとしましたが、動作させることができません。

 <div class="hover" style="width: 100%; 
        height: 100%; 
        overflow: auto;"

        onmouseover="document.getElementById('tag').style.display='';"
        onmouseout="document.getElementById('tag').style.display='none';">   

<div style="
        background-repeat: no-repeat; 
        background-position: center; 
        background-size:27px 27px;
        background-image:url('/static/img/icons/search.png');
        background-color: black;
        width: 100%; 
        height: 70%; 
        opacity:0.7;
        position: absolute;
        z-index: 2;
        display: none;
        "
        id="tag">
</div>


 <!-- We insert a picture into the top of tile !-->
<img src='<% if (typeof(image) != "undefined") { %><%= image %><% } %>'
    align=left;
    style="height:70%;

    padding-bottom: 0px;
    width:100%;">
 <!-- We add a title-->
<h2 class="ok" style="margin-left:20px; margin-top: 15px;">
    <% if (typeof(title) != "undefined") { %><%= title %><% } %></h2>
 <!-- We add a description-->
<h4 class="mt5" style="margin-left:20px; margin-top: 10px;">
    <% if (typeof(description) != "undefined") { %><%= description %><% } %></h4>
</div>

乾杯、そして答えてくれてありがとう:) Vince