2013-10-15 2 views
0

У меня есть div, завернутый в другой div, и этот div должен отображаться при наведении на изображение. Но дело в том, что когда изображение размещено (img src) в этом контейнере div, div больше не будет отображаться при наведении курсора. Я не знаю, как это исправить, и я не понимаю, почему он работает другой div.Div не отображается на картинке hover

Это мой 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 ..)

+0

Мне не совсем понятно, что не работает. Когда я нависаю над изображением «Khumba», я получаю небольшую накладку с ссылками «Watch Trailer» и «More Info». Я должен увидеть что-то еще? – Pete

+0

Да, вы должны увидеть значок сердца (наведите указатель мыши на div, где нет изображения) –

+0

Я вижу значок сердца, так что есть что-то, что мне не хватает? Также не забудьте закрыть теги изображений с помощью '/>' в конце. –

ответ

0

You нужно, чтобы переместить 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> 
Смежные вопросы