Wordpress CSS - 菜单中的图像按钮问题在悬停时消失-Java 学习之路

我正在尝试将社交关注链接按钮的自定义图像添加到我的网站侧边栏菜单中 . 现在我被困在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; }

The problem is that when you hover over the link the background image disappears, 它没有按原样转换到精灵的"active"版本 .

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

第三个问题是悬停激活区域很大，它会拉伸菜单栏的整个宽度而不是恰好在图像的顶部 . 因此，如果您位于图像的右侧，即使您无法单击FB链接，它仍会被视为“悬停” .

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

我的网站是americagonepostal.com . 基本主题是Hum .

顺便说一下，我以前从未真正做过CSS . 我正在做这个网站，作为一个完全技术迟钝的堂兄，但是是一个艺术家，所以有非常具体的审美期望 . 我一直在不知道自己在做什么，所以如果有更好的方法将链接的图像放在那个侧边菜单区域，我很满意 . 当您悬停时，它不一定要“突出显示”，但这将是一个很好的接触 .

理想情况下，我想以相同的低调邮票风格添加Facebook，Twitter和RSS按钮，但水平 . 是否可以像我一样使用自定义菜单将所有3个按钮放在一个水平上？

谢谢 .

1 回答

试试这个：

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

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

文本缩进：更改品牌部分中的text-align属性：

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

这仅适用于：悬停如果您需要正常状态受到影响，您必须使用内嵌样式（不是最佳做法，但在这种情况下将解决问题）：

<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; }

回复于 2024-05-21T20:51:42+08:00

Wordpress CSS - 菜单中的图像按钮问题在悬停时消失

1 回答

相关问题