将鼠标悬停在 link 周围

Question

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

我试过将 background-image 设置为 opacity:0 并将鼠标悬停在 opacity:1 上，但问题是当 link 较长时背景图像不掩盖这一切。我也尝试过使用边框，但后来我无法添加自定义边框形状，看起来像您用钢笔绘制的圆形草图。

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

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

Answer 1

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

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

Answer 2

您可以使用 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

将鼠标悬停在 link 周围

Circle around link on hover

javascript

css

animation

hover