这是我想做的: 我创建了一个通用模板,可以提供多个图 block 。 当鼠标悬停在图 block 上时,它会在图 block 上显示一个带有图标的透明黑色正方形。 它工作正常,但问题是当我在同一页面上使用模板获得多个图 block 时,无论我的鼠标悬停在哪个图 block 上,透明黑色方 block 始终位于第一个图 block 上方。
这是我的代码,它是一个混合的 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 :) 文斯
最佳答案
问题是您要为 ID 为“tag”的元素分配悬停效果。 找到的第一个元素受到影响。
尝试分别选择每个元素。
关于javascript - 当鼠标悬停在图 block 上时我的 CSS 模板出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18104118/