Html 如何在移动指针时使用CSS使文本消失

我试图在悬停时显示文本“跟随我”。 文本显示良好，但将鼠标指针移开后，文本将折叠并消失

移动指针时，有没有办法立即隐藏文本

以下是我的HTML和CSS，显示了我如何实现当前效果：

.fa{
填充：20px 20px；
字体大小：1.4rem；
宽度：25px；
文本对齐：居中；
文字装饰：无；
过渡：全部缓解0.4s；
字体系列：“Roboto”，无衬线；
边界半径：5px；
长方体阴影：0 5px 5px rgba（0,0,0,0.3）；
}
.fa:悬停{
不透明度：0.9；
}
谷歌公司{
背景#DD4B39；
颜色：白色；
位置：相对位置；
字号：0pt；
}
.fa谷歌：：之后{
位置：绝对位置；
最高：35%；
右：0.6雷姆；
内容：“跟我来”；
过渡：全部缓解0.4s；
不透明度：0；
文本转换：大写；
字体系列：“Roboto”，无衬线；
}
.fa谷歌：悬停{
填充：20px 130px 20px 20px；
}
.fa谷歌：悬停：：之后{
右：1.2rem；
不透明度：1；
}

---

将转换移动到

：：之后的
元素的悬停定义。转换将仅在悬停时应用，当您移动光标时，
：：after
将立即消失

.fa-google:hover::after {
  right: 1.2rem;
  opacity: 1;
  transition: all ease 0.4s;
}

示例：


.fa{
填充：20px 20px；
字体大小：1.4rem；
宽度：25px；
文本对齐：居中；
文字装饰：无；
过渡：全部缓解0.4s；
字体系列：“Roboto”，无衬线；
边界半径：5px；
长方体阴影：0 5px 5px rgba（0,0,0,0.3）；
}
.fa:悬停{
不透明度：0.9；
}
谷歌公司{
背景#DD4B39；
颜色：白色；
位置：相对位置；
字号：0pt；
}
.fa谷歌：：之后{
位置：绝对位置；
最高：35%；
右：0.6雷姆；
内容：“跟我来”；
不透明度：0；
文本转换：大写；
字体系列：“Roboto”，无衬线；
}
.fa谷歌：悬停{
填充：20px 130px 20px 20px；
}
.fa谷歌：悬停：：之后{
右：1.2rem；
不透明度：1；
过渡：全部缓解0.4s；
}
没有CSS选择器指示鼠标移走，但您可以用另一种方式来考虑：应该没有可见文本，它只显示在：hover上。