Question

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

悬停时：

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个像素，而不是整个元素。但是，即使背景设置为透明，我实际上也无法通过背景看到盒子阴影。

盒子阴影应该被视为悬停文本的新背景颜色，但我只是在元素移动的边缘周围得到一个轮廓。

如何让背景真正透明？

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

Answer 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);
}

通过透明背景完全可见的框阴影

1 个答案: