当鼠标悬停在图块上时，我的 CSS 模板出现问题

Question

这是我想做的： 我创建了一个通用模板，可以提供多个图块。 当鼠标悬停在图块上时，它会在图块上显示一个带有图标的透明黑色方块。 它工作正常，但问题是当我在同一页面上使用模板获得多个图块时，无论我的鼠标在哪个图块上，透明黑色方块总是在第一个图块上。

这是我的代码，它是混合的 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>

干杯，并提前感谢您的 asnwer :) 文斯

Answer 1

问题是您正在为 ID 为“tag”的元素分配悬停效果。 找到的第一个项目受到影响。

尝试分别选择每个元素。