javascript - svg 图像上的悬停效果不适用于与 Joomla 中的单篇文章链接的页面

Question

在我的 Joomla 网站中:

我的网站页脚中有社交图标，这些图像为 svg 格式。

现在我需要在悬停时更改我的图像。

我应用了以下 jquery，它在主页上运行良好。但它不适用于菜单类型为 Single Article 的菜单。

我已将 jquery 放在模板的索引文件中，脚本是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 jQuery(document).ready(function ($) {
      var sourcehover = function () {
        var $this = jQuery(this);
        var hoverimg = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', hoverimg);
    };
    jQuery(function() {
        jQuery('img[data-alt-src]').each(function() { 
            new Image().src = jQuery(this).data('alt-src'); 
        }).hover(sourcehover); 
    });
    });
</script>
<div class="social clearfix"> 
      <a href="#" target="_blank">
         <img src="http://52.24.52.110/images/social-icons/fb.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/fb_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="http://52.24.52.110/images/social-icons/google-plus.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/googleplus_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="http://52.24.52.110/images/social-icons/youtube.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/youtube_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="http://52.24.52.110/images/social-icons/pinterest.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/pinterest_hover.svg" />
    </a>
    <a href="#" target="_blank">
      <img src="http://52.24.52.110/images/social-icons/instagram.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/instagram_hover.svg" />
</a>
    <a href="#" target="_blank">
      <img src="http://52.24.52.110/images/social-icons/twitter.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/twitter_hover.svg" />
    </a>

  <a href="#" target="_blank">
    <img src="http://52.24.52.110/images/social-icons/linkedin.svg" alt="" width="32" height="32" data-alt-src="http://52.24.52.110/images/social-icons/linkedin_hover.svg" />
     </a>
</div>

Answer 1

此功能不需要任何 JavaScript。您可以通过 CSS 获取它。

.social-icon {
  display: inline-block;
  overflow: hidden;
  text-indent: 32px;
  width: 32px;
  height: 32px;
  background-size: cover;
}
.fb {
  background-image: url(http://52.24.52.110/images/social-icons/fb.svg);
}
.fb:hover {
  background-image: url(http://52.24.52.110/images/social-icons/fb_hover.svg);
}
.googleplus {
  background-image: url(http://52.24.52.110/images/social-icons/google-plus.svg);
}
.googleplus:hover {
  background-image: url(http://52.24.52.110/images/social-icons/googleplus_hover.svg);
}
.youtube {
  background-image: url(http://52.24.52.110/images/social-icons/youtube.svg);
}
.youtube:hover {
  background-image: url(http://52.24.52.110/images/social-icons/youtube_hover.svg);
}
.pinterest {
  background-image: url(http://52.24.52.110/images/social-icons/pinterest.svg);
}
.pinterest:hover {
  background-image: url(http://52.24.52.110/images/social-icons/pinterest_hover.svg);
}
.instagram {
  background-image: url(http://52.24.52.110/images/social-icons/instagram.svg);
}
.instagram:hover {
  background-image: url(http://52.24.52.110/images/social-icons/instagram_hover.svg);
}
.twitter {
  background-image: url(http://52.24.52.110/images/social-icons/twitter.svg);
}
.twitter:hover {
  background-image: url(http://52.24.52.110/images/social-icons/twitter_hover.svg);
}
.linkedin {
  background-image: url(http://52.24.52.110/images/social-icons/linkedin.svg);
}
.linkedin:hover {
  background-image: url(http://52.24.52.110/images/social-icons/linkedin_hover.svg);
}

<div class="social clearfix"> 
  <a href="#" target="_blank" class="social-icon fb">facebook</a>
  <a href="#" target="_blank" class="social-icon googleplus">googleplus</a>
  <a href="#" target="_blank" class="social-icon youtube">youtube</a>
  <a href="#" target="_blank" class="social-icon pinterest">pinterest</a>
  <a href="#" target="_blank" class="social-icon instagram">instagram</a>
  <a href="#" target="_blank" class="social-icon twitter">twitter</a>
  <a href="#" target="_blank" class="social-icon linkedin">linkedin</a>
</div>

下一步是将图像组合成 SVG-sprite。它将消除加载故障并减少 HTTP 请求的数量。