3

我正在尝试创建一个以网格（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 :)

4

3 回答 3

2

如果您添加position:relative到您的 LI 标记，您可以在其中添加一个 html 元素，该元素绝对位于外部并放置在产品图像和信息下方。

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

于 2011-10-25T21:07:02.580 回答
1

由于您不需要适应不太适应的浏览器，因此我将使用伪元素和 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/

于 2011-10-25T21:43:01.183 回答
0

你不能box-shadow在悬停时给你的产品框阴影吗？

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

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

编辑

看起来您可能想要使用<spread>box shadows 的属性，定义如下：

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

因此，您可以简单地添加价差值，而不是上面的，例如：

box-shadow: 0 0 5px 5px black;
于 2011-10-25T21:55:12.073 回答