通过透明背景完全可见的盒子阴影答案

【问题标题】：Fully visible box shadow through a transparent background通过透明背景完全可见的盒子阴影
【发布时间】：2014-05-10 01:00:24
【问题描述】：

我创建了一个悬停效果，它执行以下操作：

悬停时：

1) 元素悬停在上 4px，左 4px。

2) 背景设置为透明。

3) 文字阴影设置为 4px 4px。

4) Box-shadow 设置为 4px 4px 并设置为高亮颜色。

  top: -4px;
  left: -4px;
  position: relative;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  background-color: transparent;
  box-shadow: 4px 4px 0 #E56E21;

这应该给人一种错觉，即只是文本向上移动了 4、4 个像素，而不是整个元素。但是，即使背景设置为透明，我实际上也无法通过背景看到盒子阴影。

box-shadow 应该被视为悬停文本的新背景颜色，但我只是在元素已移开的边缘周围得到一个轮廓。

如何让背景真正透明？

JSFiddle： http://jsfiddle.net/WJ83B/3/

【问题讨论】：

能否添加正常和悬停状态的CSS和HTML + jsfiddle.net
box-shadow 不会在 box 下呈现（至少在当前的 webkit 中），因此 transparent 属性可以正常工作
请提供一个有效的 JSFiddle。
jsfiddle.net/WJ83B/3
如果我正确理解了您想要的内容，您应该简单地将文本放入单独的标记中，然后使用.yourelement:hover > span 替换它。然后你就不需要摆弄背景颜色了。

标签： jquery css

【解决方案1】：

您尝试的解决方案过于复杂（对于简单的任务而言，Javascript 太过分了）。只需将文本包装在另一个标签中并替换它，这样您的背景就会保持在它所属的位置。

JSFiddle

HTML：

<p class="menu_item_brand"><span>something</span></p>

CSS：

.menu_item_brand:hover span{
  top: -4px;
  left: -4px;
  position: relative;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

【讨论】：

感谢您的帮助！