带有悬停 div 显示的 WordPress 图像网格

Question

我想知道制作 3x3 的图片网格并让鼠标悬停在每个图像上显示一个带有冗长描述的 div 的最简单方法是什么？ 我打算在 wordpress 页面上做这个。谢谢！

Answer 1

既然你问的是最简单的方法，你可以不使用 javascript，但它的支持会有些有限（至少对于旧浏览器.. cough IE cough ）。 HTML 将类似于：

<ul class="thumbs">
    <li>
        <img src="some_image_here" alt="some_description" />
        <p class="description">Lorem ipsum dolor sit amet</p>
    </li>
</ul>

描述本身可以是隐藏在拇指下方（具有overflow: hidden;）并在拇指悬停时可见的绝对元素。
我的想法的一个例子：

http://jsfiddle.net/SjF3N/

当然你可以调整拇指的大小来满足你的需要，我只是想把它放在 jsfiddle 布局中。