Question

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

另外，我已经阅读了之前有关使用框阴影滚动速度的帖子。我已尽可能小，但有没有人想出如何让它更快？我非常喜欢这种外观，但如果滚动速度太慢，则功能不起作用。

以下是目前构建的网站链接。

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

请你好 - 我是新手 - 我是一名建筑师而非网页设计师。任何建议都将不胜感激。

Answer 1

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

我还建议直接将框阴影应用于img或a元素，而不是包含它们的td。

Answer 2

删除否定z-index不适用于插入阴影。有三件事要做，以实现您的需求：

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

为您的链接添加以下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值代替#ccc，因为阴影将叠加在图片上。

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

框阴影 - 单击后面的图像+慢滚动

2 个答案: