我正在使用Instagram API构建一个应用程序,它引入了某些instagrams。我试图在每个图像上添加一个大的心脏翻转,最终显示图像已经收到的“喜欢”的数量。我停留在这一点上,即使悬停工作并且心脏显示,它们也与图像不一致(并且在图像顶部)(参见screengrab)。我没有为每个单独的图像设置任何div,因为代码只是拉入图像列表。但是,我确实在列表中创建了一个div来插入“on”和“off”类的翻转。
任何有关如何修改代码以使其工作的帮助都会很棒。谢谢你!
{% for i in instagrams %}
<ul>
<li id= 'instagram'>
<div class="roll">
<IMG class="on" img src='{{i[0]}}'>
<IMG class="off" img src="http://f.cl.ly/items/321322043C0Y2g0R2K0g/smallerheart.jpg">
</div>
<div id ="caption">{{i[1]}}</div>
</li>
{%endfor%}
img {
width: 300px;
height: 300px;
padding: 1px;
background-color: white;}
.roll
.roll {width: 300px;}
.roll {height: 300px;}
.roll {background: blue;}
.roll .on { display: block; }
.roll .off { display: none; }
.roll:hover .off { z-index:0; top:25px; left:8px; display: block; }
.roll:hover .on {z-index:10; top:25px; left:8px; display: block; }
li#instagram {
float: left;
display: ;
margin-bottom: 20px;
background-color: white;
z-index:1}
答案 0 :(得分:0)
您需要在z-indexed元素上设置一个位置,如:
position: relative;