父级的背景不过渡（幻灯片）

Question

当我悬停一个链接时，我希望有一个过渡效果。我希望在链接之后平滑地出现一段文字。

这就是我目前所拥有的：

p {
    border-radius: 1em;
    padding: 0.5em;
    background-color: chocolate;
    display: inline-block;
    width: auto;
    transition: width 1s;
}

p>span {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    transition: all 1s;
}

p:hover>span {
    max-width: 100%;
}

<p>
  <a href="mailto:john.doe@server.com">@</a>
  <span>john.doe@server.com</div>
</p>

如您所见，文本显示为幻灯片效果，但这不适用于父级的背景。我怎样才能让幻灯片也成为背景？

Answer 1

您的代码中存在多个问题。我会列出来的。

1. 正在关闭 div 标记，但我没有看到任何打开的 div 标记。
2. 您在p 和span 上都设置了width，但只需要一个。
3. 您没有在链接中打开整个mailto:，而只是@，我认为这是一个糟糕的用户体验。不确定这是否是设计使然。

我对您的代码进行了一些修改，以便它与电子邮件一起为背景设置动画。

如果您不想将整个电子邮件作为 URL，只需将 span 移出并将其放在 a 标记旁边，其余部分应该可以正常工作。

p {
  border-radius: 1em;
  padding: 0.5em;
  background-color: chocolate;
  display: inline-block;
  transition: all 1s;
  overflow: hidden;
  max-width: 15px;
  white-space: nowrap;
}

p:hover {
  max-width: 100%;
}

p span {
  margin-left: 8px;
}

<p>
  <a href="mailto:john.doe@server.com">@<span>john.doe@server.com</span></a>
</p>