html - 在鼠标悬停时添加一个包含 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;
}

演示：http: //jsfiddle.net/NhfF3/

Answer 2

你应该在元素div内添加一个隐藏的。http://jsfiddle.net/SKxjM/li

这是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 :after 标记与内容一起使用。

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


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

此外，您可以动态添加它，如果这样可以更轻松地为您的网站工作：

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