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

您应该在div元素中添加隐藏的li。 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\'');

鼠标悬停时在li周围添加包含数据的div？

3 个答案: