css - 图像悬停时不显示 Div

Question

我有一个 div 包裹在另一个 div 中，当悬停在图像上时，这个 div 必须显示出来。但问题是，当将图像（img src）放置在该 div 容器中时，div 将不再显示悬停。我不知道如何解决这个问题，我不明白为什么它确实适用另一个分区。

这是我的html代码：

<!--- START [01] --->
<div class="f1">
    <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
    <div class="f2"><b>Khumba</b><span class="yr"><b>(2013)</b></span>
        <br /> <span class="moreinfo"><a href="/">Watch trailer</a> // <a href="/coming-soon#hercules">more info</a></span> 
    </div>
    <div class="f3">
        <div class="half"></div>
    </div>
</div>
<!--- END [01] --->

这是小提琴： http: //jsfiddle.net/ffXX9/ （当图像放置在该div中时，心形图标不会出现在悬停时......）

Answer 1

您需要重新定位 div

示例http://jsfiddle.net/ffXX9/2/

<div class="f1">
    <div class="f3" title="bla">
        <div class="half"></div>
    </div>
     <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
    <div class="f2">PPPOOOOPPP <span class="yr">(YEAR)</span> 
    </div>

</div>