悬停后向内容属性添加动画答案

【问题标题】：Adding animation to content property, after hovering悬停后向内容属性添加动画
【发布时间】：2017-01-29 00:43:09
【问题描述】：

我想要实现的是当您将这样的元素悬停时的动画：

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.home:hover::after{
  content: " Home";
}

&lt;a href="#" class="home"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;

因此，当您将鼠标悬停在 a 时，会显示一些额外的文本，但我找不到任何过渡来平滑显示它。不要介意回答使用transition: all ...，因为这不起作用。可以在http://www.testingc.ga 或下面的 sn-p 中找到该网站的实时示例。

iframe sn-p（打开导航以查看悬停时带有content: "Text" 的元素。

iframe{
  border: none;
  width: 100vw;
  height: 100vh;
}

&lt;iframe src="https://www.tc.gamingprouk.net"&gt;Error&lt;/iframe&gt;

欢迎任何帮助！

【问题讨论】：

您在标签上添加了 javascript 和 jquery，但您想要纯 CSS，请更新您的帖子
你到底想达到什么目的？您提供的示例没有帮助（看不到 TEXT）。
@ibrahim 检查更新的 sn-p。

标签： html css animation css-transitions font-awesome

【解决方案1】：

这样的？我用 CSS 过渡制作了淡入/淡出效果

.home {
  position: relative;
}
.home::after {
  content: 'Home';
  transition: opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  margin-left: 10px;
}
.home:hover::after {
  opacity: 1;
  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<a href="#" class="home"><i class="fa fa-home"></i></a>

【讨论】：

在这种情况下，文本 Home 会显示，但 opacity: 0 直到您将其悬停。我将此添加到引导导航中，如果文本仍然存在但未显示，它看起来并不好。导航实例：testingc.ga
你想要什么效果？也可以轻松地将宽度从零更改为/从零完成
任何类型的动画，但是在用户悬停元素之前，文本不能显示在页面上，因为即使是 opacity: 0 也会在导航中占用空间代码> 或颜色：透明代码>。它适用于 display: none，但 display 属性名称没有过渡。

【解决方案2】：

您可以先设置原始状态，然后在悬停时对其进行动画处理

a:after {
    content: 'Home';
    opacity: 0;
    transition: opacity: 0.5s linear;
}

a:hover:after {
    opacity: 1;
}

【讨论】：

在这种情况下，文本 Home 会显示，但 opacity: 0 直到您将其悬停。我将此添加到引导导航中，如果文本仍然存在但未显示，它看起来并不好。导航实例：testingc.ga
在这种情况下也为宽度设置动画
我在 global.css 中有 * {transition: all .5s linear;}，所以宽度已经动画化了
你设置了宽度：0；然后 width: 100px on hover 例如。从自动动画到数值将不起作用。这是本网站菜单上的示例link
这里是一个例子，注意你需要在 element 和 element:after 上都指定过渡。 jsbin example