1

リスト要素にマウスを合わせると、遷移は正しく行われますが、リンクのあるリスト要素にマウスを合わせる (ホバーする) と、特にテキスト自体にマウスを合わせるまで、テキストは遷移しません。

問題の GIF は次のとおりです (カーソルがなくてすみません。'Home' はリスト内のリンクで、'example1' は単なるリストです):

ここに画像の説明を入力

ここでは少し漠然としているかもしれません。ここでは、現在の形式でアップロードされています。そのナビゲーション バーを担当する CSS は、/* ドロップダウン */ ボックス内にあります。

要素を調べると、ソース全体がそのWebページにすべてあります。（ここに入れてみましたが、コードタグが機能しません。）

4

2 に答える 2

1

これはli、タグとaタグの間にスペースがあるためです。aサブメニューのすべてのスタイリングをではなく タグに適用する必要がありますli。

だから、代わりに

li {
    padding:5px
}

持ってる

li a {
   padding: 5px
}

ホバーで同様のことを行います。ホバー クラスをaではなくにアタッチしますli。

編集：

または、 を に指定します:hover { color :#fff; }(li現在はa.

于 2013-03-28T18:37:08.277 に答える
0

多くの場合、アンカー要素がメニュー項目の完全なスペースを占めるようにするとよいでしょう。これには次の 2 つの目的があります。

  1. エリア内のどこでもイベントに反応できます。
  2. ユーザーは、クリック可能/タッチ可能な領域を見つけるために「探し回る」必要はありません。

具体的には、アンカーの表示をblockまたはinline-blockに設定し、それらをパディングすることをお勧めします（含まれて<li>いる要素ではありません）。

簡単な例を次に示します: http://jsfiddle.net/zzjZY/3/

CSS

LI {
    width: 200px;
    border: 1px solid red;
}
A {
    display: block;
    padding: 8px;
}
A:hover {
    -webkit-transition:color 300ms ease-in-out;
    -moz-transition:color 300ms ease-in-out;
    color:#fff;
    background-color:#060;
}

HTML

<ul>
    <li><a href="http://stackoverflow.com">a little text</a></li>
    <li><a href="http://stackoverflow.com">a little text</a></li>
    <li><a href="http://stackoverflow.com">a little text</a></li>
</ul>

:hoverアンカーが要素を完全に塗りつぶすため、含まれている要素内のどこにでも書式設定が適用されていることがわかります。リンクは、含まれているリスト項目内のどこでもクリックできます。

于 2013-03-28T18:40:55.560 に答える