我正在使用 instagram API 构建一个应用程序,它会引入某些 instagram。我正在尝试在每张图片上添加一个大心形滚动,最终将显示该图片收到的“喜欢”数量。我被困在这一点上,因为即使悬停有效并且红心显示,它们与图像不一致(并且在图像之上)(参见屏幕抓图)。我没有为每个单独的图像分配任何类型的 div,因为代码只是拉入图像列表。但是,我确实在列表中创建了一个 div,以插入翻转“开”和“关”类。
任何有关如何修改代码以使其工作的帮助都很棒。谢谢!
{% 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}
最佳答案
您需要在 z 索引元素上设置一个位置,例如:
position: relative;
关于html - Instagram Feed 的图像翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17241138/