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

Question

我想在悬停 link 时有过渡效果。我希望在 link.

之后顺利显示文本

这就是我目前的情况：

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

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

结束 div 标签，但我没有看到任何开始 div 标签。
您在 p 和 span 上都设置了 width，但只需要一个。
您没有将整个 mailto: 变成 link，而只是 @，我认为这是一个糟糕的用户体验。不确定这是否是设计使然。

我稍微修改了您的代码，以便它也为背景和电子邮件设置动画。

如果您不想将整个电子邮件作为 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>

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

The background of the parent does not transition (slide)

css

css-transitions