如何在基于 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 来添加它。我不知道这是否足够清楚，如果不够清楚，请询问，我会尽力提供一个可行的示例。

Answer 2

由于您不需要适应不太兼容的浏览器，因此我将使用伪元素和 CSS box-shadow 的组合：

CSS:
.product {
  position: relative;
}
.product:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.product:hover:after {
  box-shadow: 0 0 5px #CCC;
}

.product:after 声明在相对定位的文档流之外创建一个元素到 .product 元素。 .product:hover:after 声明创建阴影。调整尺寸等以适合您的模型。

这是一个示例： http://jsfiddle.net/blineberry/SMqDx/

Answer 3

您不能只使用 box-shadow 在悬停时为您的产品框提供阴影吗？

.product li:hover{
    box-shadow: 0 0 5px black; /* Whatever size shadow you need */
}

类似代码的示例： http://jsfiddle.net/6zcqZ/

编辑

看起来您可能想要使用盒子阴影的 属性，定义如下：

box-shadow: [x-offset] [y-offset] [blur value] [spread value] [color];

因此，您可以简单地添加点差值，例如：

box-shadow: 0 0 5px 5px black;