悬停时环绕链接答案

【问题标题】：Circle around link on hover悬停时环绕链接
【发布时间】：2020-10-21 15:52:25
【问题描述】：

我无法确定如何在悬停时在链接上显示圆形涂鸦（如手绘草图）。在一个完美的世界中，它应该是一个动画 svg 路径，但此时只是为了出现对我有用。这正是我想要实现的目标：

我已经尝试将背景图像设置为 opacity:0 并且将鼠标悬停在 opacity:1 上时，但问题是当链接较长时，背景图像并不能覆盖所有内容。我也尝试过使用边框，但是我无法添加自定义边框形状，看起来就像你用钢笔画的圆形草图。

这是我在网上找到的一个示例：click here，即“圈出我”示例，位于“突出显示的标题”下

我希望这一切都有意义，谢谢！

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
嗨，我试过了，但我的代码并不是什么特别的东西，只是一个带有链接的列表和每个悬停时的伪背景图像，只有当链接大小相同时它才能正常工作，但如果有些更长，背景图像会变得很奇怪。我对这些东西不太了解，所以我也不知道如何准确地问我的谷歌问题：D
所以提供一个minimal reproducible example 以便我们可以使用它。

标签： javascript css animation hover

【解决方案1】：

您可以使用 Chrome DevTools 或参考网站上的其他类似工具来学习如何做到这一点。

<div class='button'>
  <button>Click Me</button>
  <svg preserveAspectRatio="none">
    <path fill="none" d="..." />
  </svg>
</div>

.button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.button button {
  padding: 8px 16px;
  border: none;
  background: none;
  outline: none;
}

.button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button path {
  stroke: #db3157;
  stroke-width: 8px;
  stroke-dasharray: 0 1500;
}

.button:hover path {
  animation: draw 1s forwards;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 1500;
  }

  to {
    stroke-dasharray: 1500 1500;
  }
}

JSFiddle 上的示例

【讨论】：

【解决方案2】：

HTML

<html>

<head>
    <style>

    </style>
</head>
<body>
    <a href="#" class="circle">Test</a>
</body>
</html>

CSS

.circle{
  width:50px;
  height:50px;
  padding: 4em 4em;
}
    .circle:hover {
    border-radius: 100%;        
    background: green;
    display:inline-block;
    line-height:100px;
    width:50px;
    height:50px;
}

试试这个，让我知道它是否适合你。我想帮你。

【讨论】：