1

私のワードプレスのテーマに問題がありました:

ウェブサイトで「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 に答える