鼠標懸停在li上添加一個包含div的數據？

Question

我有一個正常的li元素，它包含一張圖片。現在，當我將它懸停時，它應該被一個div包圍，例如裏面包含了對li中圖像的一些描述。請查看這個鏈接http://www.zalando.de/damenschuhe-sandaletten/並將鞋子盤旋。如您所見，它會在圖像中添加信息。

我嘗試了幾件事情，但結果並不是我想要的。任何想法如何以一種好的方式？

謝謝！

Answer 1

像這樣的事情？

<ul> 
    <li> 
     <div class="info">Info 1</div> 
     [Image 1] 
    </li> 
    <li> 
     <div class="info">Info 2</div> 
     [Image 2] 
    </li> 
    <li> 
     <div class="info">Info 3</div> 
     [Image 3] 
    </li> 
    <li> 
     <div class="info">Info 4</div> 
     [Image 4] 
    </li> 
</ul> 

ul{ 
    list-style:none; 
    text-align:center; 
    padding: 0 35px; 
} 
li{ 
    display:inline-block; 
    background: #ddd; 
    height:200px; 
    width:200px; 
    margin:10px; 
    padding:0; 
    position:relative; 
} 
li > .info{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:-40px; 
    width:35px; 
    height:100%; 
    background:#ffa; 
} 
li:hover{ 
    background:#ccf; 
    border:5px solid #afa; 
    margin:5px; 
} 
li:hover > .info{ 
    display:block; 
} 

DEMO：http://jsfiddle.net/NhfF3/

Answer 2

您應該在li元素內添加隱藏的div。 http://jsfiddle.net/SKxjM/

這是CSS

.expandable .expansion { display: none; } 
.expandable:hover .expansion { display: inline; } 

和HTML應該是這樣

<ul> 
    <li class="expandable">this is expandable 
     <div class="expansion">more info</div> 
</ul> 

Answer 3

你可以嘗試使用CSS：與內容標籤之後。

<li> 
    <img src="whatever.jpg"> 
</li> 


li:hover:after{ 
    content: 'image caption here'; 
} 

此外，您可以動態地添加它，如果這使得它爲您的網站更容易的工作：

document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');