Question

我的wordpress主题出了问题：

我在我的网站上使用“wp_list_pages（'title_li ='）”生成了一个toplevelmenu，并使用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;  
}

输出：悬停的menuitem的较厚的底边。

<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'容器内工作。

Answer 1

目前你有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 */
}

css在wordpress主题上盘旋菜单项

1 个答案: