CSS在WordPress主題

懸停的菜單項我有一個問題，我的wordpress主題：CSS在WordPress主題

我生成使用toplevelmenu「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」與「禮」？：

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

來源

2013-02-15 shutdown-i

現在你有2 :hover的。將您的a標記保留在您的li中，並刪除a:hover，因爲只有當您將鼠標懸停在a上時，該標記纔會生效。

改變你的CSS看起來像這樣：

[這種變化，當你將鼠標懸停在li

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

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

的 a懸停效果將發生

來源

2013-02-15 10:15:48 ashley

CSS在WordPress主題

回答

相關問題