时间戳

首页 > 解决方案 > 悬停时环绕链接

javascript - 悬停时环绕链接

问题描述

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

在此处输入图像描述

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

这是我在网上找到的一个示例：单击此处，“圈出我”示例，在“突出显示的标题”下

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

标签： javascriptcssanimationhover

解决方案

您可以通过使用 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上的示例

推荐阅读