0

このフィドルは機能します（We Distribute製品の下を参照）：

http://jsfiddle.net/dgUFw/1362/

しかし、私が構築している Web サイトのコンテキスト内のページでは、JavaScript を実行しています (jQuery を含む)。たとえば、ホームページにスライドショーがあり、フィドル ナビゲーションの 3 番目のレベルにカーソルを合わせると、1 ～ 2 秒後に消えます。さらに、3 番目のレベルが 2 番目のレベルのリストの上に移動するなど、説明できない奇妙な動作が他にもありますがli、これはフィドルでは発生しません。

私は CSS と JavaScript を一緒に統合することに比較的慣れていないので、この動作は見たことがありません。

Firefox で JavaScript をオフにすると、動作がおさまったように見えました。

何が原因で、どうすれば修正できますか? さまざまな JS ライブラリと CSS 正規化も試しましjsfiddle.netたが、結果は同じでした。また、同じフィドルの結果と悪いウェブサイトの結果で Opera を試しました。Chrome はより堅牢で、誤動作を起こしにくいようです。

We Distributeまた、第 3 レベルの内部では、第 2 レベルのテキストが黒くなっていることに気付いたかもしれません。これを白のままにするのも難しいです。しかし、これは私の主な質問ではありません。JavaScript/CSS の相互作用に最も興味があります。

メモを編集

以下からいくつかのアドバイスを受けて、これをさらにテストしました。

フィドルでさらにテストを行いまし た。これは、クリックせずに折りたたみが発生することを除いて、Web サイトで見られる動作と実際には似ています。メニューをクリックして折りたたんだ後、ホバーしても通常に戻りません。

4

1 に答える 1

2

2つのこと：

まず、メニューが消える問題は z-index が原因だと思います。スライドショーの z-index が高いか、同じである可能性があり、メニューがホバー状態を失っています。これを修正するには:

#nav-top li, #nav-top li a {
    z-index: 1000;
}

次に、色/ホバーの問題については、CSS を少し変更する必要があります。

#nav-top li a:hover {
    color: #fff;
}

#nav-top li#products-sub:hover > a, #nav-top li#home-sub:hover > a,
#nav-top li#faq-sub:hover > a, #nav-top li#user-sub:hover > a, #nav-top li ul.dist-sub:hover  {
    color: #fff;
}

これにより、li のホバー状態が維持され、リンクではなくそれに基づいてリンクの色が設定されます。

変更をいじる: http://jsfiddle.net/dgUFw/1364/

于 2012-12-19T21:09:42.043 に答える