丸みを帯びた角のトラブルでNAVドロップダウン

Question

私は次のNAVドロップダウンに取り組んできました ここ.

それは機能し、ほぼ完全ですが、私には1つの問題があります。 NAVのタイトルをマウスオーバーすると、テキストは色から黒になり、ドロップダウンが表示されます。それが機能するはずですが、マウスを移動してドロップダウン内でNAVタイトルに移動すると、ブラックテキスト（アクティブな画像）が色に戻り、黒のままではありません。

ドロップダウンがアクティブで、ユーザーがテキスト（アクティブな画像）を黒く保つためにナビゲートしている場合の提案はありますか？

Answer 1

理想的には、メニュー項目の画像ではなくテキストを使用することになります。その後、CSSを使用して、ホバー上のテキスト色を制御することができます <li> JavaScriptはまったく必要ありません。

あなたが今それをしている方法で（画像付き）、私はあなたのマウスオーバーとオンマウスアウトをから移動することでまだ可能だと思います <a> に <li> その上。これが機能するためにスクリプトを微調整する必要がある場合がありますが、コンセプトを取得できれば、そのリスト項目内のアンカータグだけでなく、リスト項目全体（およびその内容）をホバリングすることを検出します。

Answer 2

メニュー項目を置くと、ドロップダウンメニューを含むように拡張されるコンテナ（おそらくDiv）にドロップダウンし、次のCSSセレクターを使用してください。それらがまだメニューまたはそのドロップダウンにある限り、それはまだホバーセレクターでカバーする必要があります。

Answer 3

CSS OT JSを使用して、マウスがホイバーするとタイトルの色を変更できますu003Cli>タイトル自体を覆すときではなく、タイトルが含まれています。