我试图将社交关注链接按钮的自定义图像添加到我的网站侧边栏菜单。现在，我被困在Facebook上，这是我的第一个测试，但理想情况下希望稍后再添加其他人。 （我意识到，使用我选择的方法可能并不容易）
我尝试使用各种方法，到目前为止，我获得的最大成功是DIY主题（this article）上的方法以及我的站点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个按钮全部放在一个水平板上？
谢谢。
最佳答案
尝试这个：
#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; }
关于css - WordPress CSS-菜单上的图像按钮悬停在菜单上时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12310318/