如何制作悬停命令=悬停时的形状？

【问题标题】：How can I make a hover command = a shape upon hover?如何制作悬停命令=悬停时的形状？
【发布时间】：2018-07-28 07:33:48
【问题描述】：

这个想法是在有人将鼠标悬停之前保留普通文本，然后我想要一个形状（理想情况下，我会从 Illustrator 中导入为 .svg）。因此，当有人将鼠标悬停在“单击此处”时，会出现一个形状，而不仅仅是颜色或不透明度的变化。

这可以使用 HTML 和 CSS 完成吗？

【问题讨论】：

当然，您可以将 SVG 设置为背景。

标签： html css adobe-illustrator

【解决方案1】：

你可以玩这样的东西：

.foo{
  width: 200px;
  background-color: blue;
  color: white;
  transition: background-color 1s ease;
}

.foo:hover{
      text-indent: -9999px;
      background-color: red;
      height: 200px;
      border-radius: 50%;    
}

<div class="foo">
click here
</div>

如果您需要进一步的帮助，请发布您想要的更多详细信息。

【讨论】：

所以我希望我的文字“关于我”在我将鼠标悬停在它上面之前显示为白色，然后我希望它具有我从 Illustrator 中保存的 .svg 的背景。我在我的文本上尝试了你的代码，效果很好，但我想导入图像形状而不是用 css 创建它。