css - 父级背景不过渡(幻灯片)

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>