css - 如何在基于 960 网格的布局中在 LI 上显示投影？

Question

我正在尝试创建一个以网格 (960.gs) 格式显示产品列表的页面。为了匹配 COMP，我需要在用户将鼠标悬停在 LI 上方时在 LI 上显示阴影。

在悬停时显示投影很简单，但要像在 COMP 中那样显示它是一项艰巨的任务，我需要一些帮助。

下面是我要匹配的 COMP 的屏幕截图。

数字 1 到 10 是网格。我使用 UL 来创建行，并使用 LI 来显示行中的产品项。

<!-- loops n times for n rows -->
<UL class="container_10 clearfix">
    <!-- loops 5 times for 5 list items in a row -->
    <LI class="grid_2 product">
        <UL>
            <LI class="prodImg clearfix">...</LI>
            <LI class="prodTitle clearfix">...</LI>
            <LI class="prodPrice clearfix">...</LI>
            <LI class="prodPromo clearfix">...</LI>
            <LI class="prodReviews clearfix">...</LI>
        </UL>
    </LI>
</UL>

从屏幕截图中可以看出，阴影从网格布局中流出......我现在知道如何在此处合并它了。

编辑:根据元素要求，我们只支持现代浏览器，所以不用担心 IE6 或其他垃圾浏览器，我可以使用 CSS3 :)

Answer 1

如果您将 position:relative 添加到您的 LI 标签中，您可以在其中添加一个 html 元素，该元素将绝对定位在产品图像和信息下方。

如果你想避免添加另一个 html 元素，你甚至可以使用 li:after 来添加它。我不知道这是否足够清楚，如果不够清楚，尽管问，我会尝试提供一个工作示例。