【问题标题】:The background of the parent does not transition (slide)父级的背景不过渡(幻灯片)
【发布时间】:2019-07-27 22:27:47
【问题描述】:

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

这就是我目前所拥有的:

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>

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

【问题讨论】:

    标签: css css-transitions


    【解决方案1】:

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

    1. 正在关闭 div 标记,但我没有看到任何打开的 div 标记。
    2. 您在pspan 上都设置了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>

    【讨论】:

    • 非常感谢您的回答。你无法想象我努力完成这项工作的时间……
    • @FrenchBoiethios 没有冒犯,但你一定是后端开发人员 xD 我看到很多后端人员都在努力做前端的事情。很高兴它帮助了你。请注意,我不再为您的电子邮件制作动画,因为我认为这没有意义。
    • 你猜对了,我从来没有尝试过写一个“真正的”网站:P 你的解决方案是完美的,这正是我试图做的。
    • 哦,只是一个小问题:我可以防止对初始“最大宽度”值使用“魔法”值吗?
    • @FrenchBoiethios 你需要一些初始值,以便你可以制作动画,当然,如果你想要我可以尝试破解它
    猜你喜欢
    • 1970-01-01
    • 2014-01-12
    • 2022-01-25
    • 1970-01-01
    • 2011-03-26
    • 2016-09-16
    • 1970-01-01
    • 2011-08-01
    相关资源
    最近更新 更多