Question

这就是我在做什么。当列表项目悬停时，我会显示div的内容。

<li>
    <a href="#">
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
        </div>
    </a>
</li>

这完全正常，我的CSS，jQuery以及HTML结构在这里定义http://jsfiddle.net/p0zyeku8/1/

我的问题是我想要在物理上（不是以编程方式）更改我的HTML结构，并将<a>置于<span>下方，并使相同的示例像以前一样工作。也就是说，现在当列表项被悬停时，我应该在<div>和<span>下面显示<a>的内容。这就是我的意思

<li>        
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
            <a href="#" class="btn btn-default">
            <a href="#" class="btn btn-primary">
        </div>
</li>

但是，当我进行此更改http://jsfiddle.net/p0zyeku8/2/时，我的CSS和HTML会变得混乱。如何修改我的CSS以包含此更改。

Answer 1

我更新了您的Jsfiddle HERE所有CSS更新错误

.thumbs li a div代替.thumbs li div

这就是你需要的吗？

Answer 2

html坏了，你忘记了标签的结尾。它应该是：

 <li>        
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
            <a href="#" class="btn btn-default"></a>
            <a href="#" class="btn btn-primary"></a>
        </div>
</li>

在列表项中添加超链接

2 个答案: