Question

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

当我获得Google HTML链接以显示我的图片时，我已经尝试了＃34; text-indent：-9999px;没有运气使链接文本只消失。该链接完全从页面上消失。

<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

的添加样式

它将充当链接

＆＃13;

    #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");
    }

＆＃13;

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

＆＃13;

分享按钮 - 悬停＆amp; Googleplus / Facebook链接

1 个答案: