Question

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

这是我的代码，它是一个混合的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”的元素指定悬停效果。找到的第一个项目受到影响。

尝试分别选择每个元素。

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

1 个答案: