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

您的代码中有多个问题。我将它们列出来。

正在关闭div标签，但没有看到任何打开的div标签。
您要同时在width和p上设置span，但是只需一个即可。
您不是在链接中打开整个mailto:，而是在我认为是不好的UX的@上转动。不确定这是否是设计使然。

我对您的代码进行了一些修改，以便它也可以将背景以及电子邮件动画化。

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

父级的背景不过渡（滑动）

1 个答案: