html - 分享按钮 - 悬停和 Googleplus/Facebook 链接

Question

我创建了会显示图像的内容，当您将鼠标悬停在它上面时，背景图像就会显示在它上面。它工作得很好，但我正试图将此功能变成一个链接。这意味着当我将鼠标悬停在图像上时，它就会变成一个链接。在这种情况下，链接实际上是 Googleplus 共享字符串。

http://jsfiddle.net/54Lr28ro/

当我让 Google HTML 链接显示在我的图片上方时，我尝试了“文本缩进:-9999 像素；没有运气使链接文本只消失。链接完全从页面上消失了.

<span class="social-googleplus">
    <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" >Google+</a><img src="http://mydiscountman.com/mdm-content/themes/clipper/images/googleplus-black64x64.png" width="64" height="64" title alt="social-googleplus-button-color">
</span>

CSS:

span.social-googleplus {background-image:url("http://mydiscountman.com/mdm-content/themes/clipper/images/googleplus-color64x64.png");
    display:block;
    position: absolute;
    height:64px;
    width:64px;
    left: 332px;
    top: 80px;

}
span.social-googleplus:hover img {visibility:hidden;}

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

而不是为 img 提供样式使用此添加样式 <a>使用 background-image和 hover更改 background-image

它将充当链接

    #googleplus {
        background:url(http://mydiscountman.com/mdm-content/themes/clipper/images/googleplus-black64x64.png);
        display:block;
        position: absolute;
        height:64px;
        width:64px;
        left: 332px;
        top: 80px;
    }
    span:hover #googleplus {
        background-image:url("http://mydiscountman.com/mdm-content/themes/clipper/images/googleplus-color64x64.png");
    }

<span class="social-googleplus">
    <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" id="googleplus">
</a></span>