1

我正在尝试将社交关注链接按钮的自定义图像添加到我的网站侧边栏菜单。现在我被困在 Facebook 上作为我的第一个测试，但理想情况下想稍后再添加其他测试。（我意识到使用我选择的方法可能并不容易）

我尝试使用各种方法，到目前为止我最成功的是 DIY Themes （本文）和我的网站 style.css 上的方法，我添加的代码如下：

#menu-item-127 a {
    display:block; 
    height:83px; width:75px; 
    padding:0px; 
    margin-left:6px; 
    outline:none; 
    /*text-indent:-9999px;*/
    background-image:url('/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png');
    background-position:0 -82px;
}

#menu-item-127 a:hover { background-position:0 0px; }

问题是，当您将鼠标悬停在链接上时，背景图像会消失，它不会像应有的那样过渡到精灵的“活动”版本。

其次，文本不会缩进屏幕，而是停留在图像的顶部（我知道上面的代码中已注释掉该部分，因为我打开和关闭它以测试发生了什么，并没有什么区别)

第三个问题是悬停激活区域太大，它拉伸了菜单栏的整个宽度，而不是正好在图像的正上方。所以如果你在图片的右边，它仍然被认为是“悬停”，即使你不能点击 FB 链接。

它似乎与我的 style.css 的其他部分有关，因为即使我删除了上述代码的 a:hover 部分，它仍然会使背景图像消失。我已经调整了每个变量并检查了我知道的每个元素，我对此感到困惑。

我的网站是americagonepostal.com。基本主题是嗡嗡声。

顺便说一句，我以前从未真正做过 CSS。我做这个网站是为了帮我的表弟，他完全是技术智障，但是是一位艺术家，所以有非常具体的审美期望。我只是在不知道自己在做什么的情况下一直在破解，因此，如果有更好的方法可以将带有链接的图像放在该侧面菜单区域中，我会全力以赴。悬停时不一定要“突出显示”，但这将是一个不错的选择。

理想情况下，我想以相同的蹩脚邮票样式添加 Facebook、Twitter 和 RSS 按钮，但水平放置。是否可以像我所做的那样使用自定义菜单将所有 3 个按钮放在一个水平面上？

谢谢。

4

1 回答 1

1

尝试这个：

#menu-item-127 a:hover {
background: url("/wp-content/uploads/2012/09/Grunge-Facebook-Stamp-small-sprite.png") !important;

!important将覆盖任何继承的样式

文本缩进：更改品牌部分中的文本对齐属性：

#branding { border: 0 none;
            bottom: 0; 
            padding-top: 5em; 
            text-align: none;
            top: 0; }

然后以相同的方式覆盖：

#menu-item-131 a:hover { background-position: 0 0 !important; 
                         text-indent: -999px !important;}

这仅适用于 a:hover 如果您需要影响正常状态以及您必须使用内联样式（不是最佳实践，但在这种情况下将解决问题）：

 <li id="menu-item-131" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-131" style="text-indent:-999px"> <a href="facebook.com/AmericaGonePostal"; target="_blank">fb</a> </li>

悬停激活区域过大的第三个问题：

#menu-item-131 a{ background-position: 0 0 !important; 
                 text-indent: -999px !important;
                 width:75px !important; }
于 2012-09-07T03:22:58.220 回答