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

Question

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

Answer 1

由于您要求最简单的方法，因此您可以在没有 javascript 的情况下执行此操作，但它的支持会有些有限（至少对于较旧的浏览器..咳IE咳）。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 布局中。