1

我正在使用 instagram API 构建一个应用程序，该 API 会引入某些 instagrams。我正在尝试在每张图像上添加一个大的心形翻转，最终将显示图像收到的“喜欢”的数量。我被困在这一点上，因为即使悬停有效并且心形显示，它们与图像（并且位于图像之上）不一致（参见屏幕截图）。对于每个单独的图像，我没有任何类型的 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}
4

1 回答 1

0

您需要在 z 索引元素上设置位置，例如：

position: relative;
于 2013-06-21T17:49:15.693 回答