1

我的 wordpress 主题有问题：

我在我的网站上使用“wp_list_pages('title_li=')”生成了一个顶层菜单，并使用 css 对其进行了样式设置：

.menucontainer li {
    float:left;
    font-family:arial;
    font-size:16px;
    text-align:center;
    font-weight:bold;
    list-style:none;
    margin:0px;
    margin-top:-3px;
    padding:12px;
    background: #ffffff;
    border-top: 3px solid #0a0a46;
    border-bottom: 3px solid #0a0a46;
}

.menucontainer li:hover {
   border-bottom: 5px solid #6464A0;
   height:18px;
}

.menucontainer li a {
    color:#2d2d2d;
    text-decoration:none;
}

.menucontainer li a:hover {
    color: #50508C;  
}

输出：悬停菜单项的较粗底部边框。

<div id="menuwrapper">
    <div class='menucontainer'>
        <li class="page_item page-item-1 current_page_item">
             <a href="http://xxx.de/?page_id=6">
                    menuitem one
             </a>
         </li>
    </div>    
</div>

问题：“a”位于“li”内，只有当我悬停链接文本时才会触发悬停。那么如何将“a”的位置与“li”的位置切换？：

<div id="menuwrapper">
    <div class='menucontainer'>
        <a href="http://xxx.de/?page_id=6">
             <li class="page_item page-item-1 current_page_item">
                    menuitem one
             </li>
         </a>
    </div>    
</div>

我想确保链接和悬停在完整的“li”容器中工作。

4

1 回答 1

0

目前你有 2:hover的。a将您的标签保留在您的内部li并删除，a:hover因为这只会在您将鼠标悬停在a.

改变你的CSS看起来像这样：

[通过此更改，a悬停效果将在您将鼠标悬停在li

.menucontainer li:hover {
   border-bottom: 5px solid #6464A0;
   height:18px;
}

.menucontainer li:hover a {
  /* what you want to do with the a */
}
于 2013-02-15T10:15:48.193 回答