1

我有两个相互交织的棘手问题。我在盒子的四个侧面有一个插入框阴影小插图，但我在里面有可点击的图像，我无法点击，因为阴影/小插图在图像上方（位于 z-index：-1）。我读了一些关于使用指针事件的信息：无，但我认为当我尝试使用它时它会影响盒子里的所有东西，所以它没有用。关于如何使这些图像可点击但仍处于阴影后面的任何建议？

另外，我已经阅读了以前有关使用框阴影的滚动速度的帖子。我已经让它尽可能小，但有没有人想出如何让它更快？我真的很喜欢这种外观，但如果滚动速度太慢，该功能将无法正常工作。

以下是迄今为止构建的站点的链接。

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

请客气——我是这方面的新手——我是建筑师而不是网页设计师。任何建议将不胜感激。

4

2 回答 2

0

移除负片z-index不适用于嵌入阴影。要实现您的需求，需要做 3 件事：

  1. float: left从#makeMeScrollable div.scrollableArea img规则中删除多余的东西。这是为了确保<a> 元素正确包裹图像。
  2. 从规则中删除box-shadow属性。.SHADOW

  3. 为您的链接添加以下 CSS：

    .SHADOW a {
  display: block;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}

请注意，我使用rgba了 value 而不是#ccc，因为阴影将覆盖在图像上。

作为旁注，没有必要在所有大写中命名类。它降低了可读性。

于 2012-11-14T03:08:28.233 回答
0

为什么你有z-index: -1链接？删除它，链接工作正常，阴影仍然可见。

我还建议直接将盒子阴影应用于imgora元素，而不是td包含它们的元素。

于 2012-11-14T02:33:23.150 回答