Question

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

＆＃13;

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

＆＃13;

<a href="#" class="home"><i class="fa fa-home"></i></a>

＆＃13;

因此，当您悬停a时，会显示一些其他文字，但我无法找到任何过渡以便顺利显示它。不要回答使用transition: all ...，因为这不起作用。可以在http://www.testingc.ga或下面的代码段中找到该网站的实时示例。

iframe片段（打开导航以查看悬停时content: "Text"的元素。

＆＃13;

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

＆＃13;

<iframe src="https://www.tc.gamingprouk.net">Error</iframe>

＆＃13;

欢迎任何帮助！

Answer 1

这样的东西？我通过CSS过渡实现了淡入/淡出效果

＆＃13;

.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;
  
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以先设置原始状态，然后在悬停时为其设置动画

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

a:hover:after {
    opacity: 1;
}

悬停后，将动画添加到内容属性

2 个答案: