Question

我注意将链接放入社交媒体的svg图标中。这里有svg图标http://joxi.ru/a2XqZEPHwl9JWA

这些是SVG这类的svg代码，

<div class="facebook-container">
  <svg class="socials-icons facebook-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <title>Share on Facebook</title>
    <path  d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
  </svg>
  {% post_to_facebook object.get_absolute_url "" %}
</div>

SVG具有样式-填充颜色和：hover颜色，效果很好。但您可能会在.facebook-icon中注意到此代码-{％post_to_facebook object.get_absolute_url“”％}

这是Django插件，它为该图标创建共享链接。实际上，它使用类.facebook-this创建div，其中包含带有链接的标签。

赞：

<div class="facebook-this">
    <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//127.0.0.1%3A8000/news/middle-east-investors-meetup" target="_blank"></a>
</div>

我所做的是，将此链接放置在Facebook svg图标的顶部，并使用CSS在Apple到Apple之间。

但是在那之后，该链接覆盖了该图标，并且：hover不再起作用。我已将链接设为透明，但它仍然涵盖了整个svg，并且不允许将鼠标悬停在svg上。

问题在于插件在页面呈现期间会自动创建链接，我看不到任何其他将链接插入图标的方法。

我只需要：hover效果即可工作，但是由于svg位于链接容器下面（完全覆盖了它），因此它不会“看到”鼠标。我该如何解决？还有其他应该尝试的方法吗？

如何将URL插入SVG图标

0 个答案: