Question

我正在使用背景图片替换我网站上的菜单项文字。我正在使用wordpress菜单。

<?php wp_nav_menu( $args ); ?>

它在使用文本时工作正常，但后来我添加了一些背景图片来替换文本，现在链接不再起作用了。

这是我的css：

#menu-item{width:199px;}
#menu-item-49{background: url('../../../../wp-content/uploads/menu/hit.png');height:29px;width:199px;}
#menu-item-49.active,#menu-item-49.current-menu-item, #menu-item-49.current-post-parent{background: url('../../../../wp-content/uploads/menu/hit_active.png')}
#menu-item-51{background: url('../../../../wp-content/uploads/menu/style.png');height:36px;}
#menu-item-51.active,#menu-item-51.current-menu-item, #menu-item-51.current-post-parent{background: url('../../../../wp-content/uploads/menu/style_active.png')}
#menu-item-50{background: url('../../../../wp-content/uploads/menu/kulture.png');height:38px;}
#menu-item-50.active,#menu-item-50.current-menu-item, #menu-item-50.current-post-parent{background: url('../../../../wp-content/uploads/menu/kulture_active.png')}
#menu-item-48{background: url('../../../../wp-content/uploads/menu/guest_editor.png');height:30px;}
#menu-item-48.active,#menu-item-48.current-menu-item, #menu-item-48.current-post-parent{background: url('../../../../wp-content/uploads/menu/guest_editor_active.png')}
#menu-item-47{background: url('../../../../wp-content/uploads/menu/coulisses.png');height:36px;}
#menu-item-47.active,#menu-item-47.current-menu-item, #menu-item-47.current-post-parent{background: url('../../../../wp-content/uploads/menu/coulisses_active.png')}

因此每个菜单项都有自己的背景图像，并在项目处于活动状态时显示，当前或父项，（我还使用jquery在悬停时设置动画，但它与我的问题无关）。

这是html输出：

<div class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="/hit-de-la-semaine/">Hit de la semaine</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-51"><a href="/category/style/">Style</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><a href="/category/k-ulture/">K-ulture</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="/category/guest-editor/">Guest Editor</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="/category/coulisses/">Coulisses</a></li>
</ul></div>

我猜我的背景图片在'<a></a>'之外，但我找不到解决方法来解决这个问题......我认为这是一个简单的解决方案，但我现在被困住了...... < / p>

任何人都可以帮助我吗？

非常感谢你的帮助，

Answer 1

你不希望你的链接标签在li开头和结尾标签之外吗？那么LI标签内的所有内容都应链接，包括你的图像：

  <div class="menu-menu-container"><ul id="menu-menu" class="menu"><a href="/hit-de-la- 
  semaine/"> <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-
  object-   category menu-item-49">Hit de la semaine</li></a>

Answer 2

此CSS规则并未引用任何内容，因为您似乎没有任何具有该ID的元素：

#menu-item{width:199px;}

对于您的其他规则，我建议您从

重写它们

#menu-item-49 { .. }
#menu-item-49.active,
#menu-item-49.current-menu-item,
#menu-item-49.current-post-parent { .. }

到

li#menu-item-49 a { .. }
li#menu-item-49.active a,
li#menu-item-49.current-menu-item a, 
li#menu-item-49.current-post-parent a { .. }

将display: block添加到他们的规则中，以便<a>使用您在CSS中为他们指定的宽度。

在$args wp_nav_menu中添加

'link_before' => '<span>', 'link_after' => '</span>'

然后你可以“隐藏”链接的普通文本，例如

li.menu-item span {
    left: -9999px;
    position: absolute;
}

使用背景图像替换菜单中的文本链接

2 个答案: