css在wordpress主题上悬停菜单项

Posted 2023-05-08

【中文标题】css在wordpress主题上悬停菜单项

【英文标题】：css hovering a menu item at wordpress theme

【发布时间】：2013-01-31 06:27:24

【问题描述】：

我的 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”容器中工作。

【参考方案1】：

目前您有 2 个:hover。将a 标记保留在li 中并删除a:hover，因为这只会在您将鼠标悬停在a 上时生效。

将你的 CSS 改成如下所示：

[通过此更改，当您将鼠标悬停在 li 上时，a 悬停效果将发生

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


.menucontainer li:hover a 
  /* what you want to do with the a */