問題タブ [rollover]

mouseover、mouseout、addClass、およびremoveClassの組み合わせを使用して、単純なマウスオーバー効果を作成しようとしています。基本的に、ユーザーが要素の上にマウスを置くと、別の境界線（1pxの破線の灰色）を適用したいと思います。初期状態は「1pxソリッドホワイト」です。「ハイライト」というクラスがあり、「境界線：1pxの破線の灰色」が含まれています。そのクラスのonmouseoverを追加し、onmouseoutで削除したいのですが、「highlight」クラス内で！importantを使用しない限り、必要な効果を得ることができません。

それぞれに画像を含む複数のDIVがあります。これらのDIVをロールオーバーするとき、別のDIVを上からフェードインさせたいです。この新しいDIVをロールオフすると、再びフェードアウトするはずです。基本的に、ここにサムネイルのグリッドのようなものが必要ですhttp://www.visualboxsite.com/

これは私が書いたコードです：

これに関する問題は次のとおりです。

• DIVの1つにカーソルを合わせると、マウスを置いたものだけでなく、すべての新しいDIVが表示されます。
• マウスをDIVの上と外に繰り返し動かすと、フェードイン/フェードアウト機能が「スタック」されます。

誰かがこれらを修正するのを手伝ってもらえますか？

Firefoxで正常に動作するJavaScriptロールオーバーコードがありますが、IEで試してみると、次のエラーが発生します。

メッセージ：'document [...]'がnullであるか、オブジェクトではありません行：25文字：13コード：0 URI：http ://www.jgm-design.com/

使用しているコードは次のとおりです。

なぜですか？または解決策？

このコードを使用して、(たとえば) クラス 'ro' を持つ test.gif がロールオーバー時に test_o.gif に変更されるようにします。問題は、画像がキャッシュにない場合、ロールオーバーとロールオフに遅延が発生することです。

基本的に、キャッシュをクリアしてテストページにアクセスすると、画像をロールオーバーおよびロールオフするたびにファイルが読み込まれるため、何時間もそこに座っていても、毎回ロールオーバー画像が読み込まれます. ただし、ページを更新すると、画像がキャッシュに保存されるようになり、すぐに機能します。これは、私が達成する必要があることです。

私はこれを使ってみました

http://flesler.blogspot.com/2008/01/jquerypreload.html

これで画像をプリロードするプラグイン

コードですが、効果がないようです。

何か案は？

このコードをしばらく機能させようとしてきましたが、何が問題なのかわかりません。画像付きトライステートロールオーバー用です。（私はCSSでこれを行うことができることを知っているので、それで答えないでください。）目標は、私はjqueryを学ぼうとしており、学習の一環として、ここで何が欠けているかを理解しようとしています.

私が問題を抱えているのは、マウスオーバーとマウスアウトのイベントを実行すると、ボタンが正しく強調表示されることです。ただし、ボタンをクリックしてから別のボタンをクリックすると、クリックしたすべてのボタンが表示されたままになります。典型的なタブコントロールのように、各画像をクリックして状態を切り替えることができる必要があります。

これを行うためのより良い方法があることは知っていますが、何が間違っていたのかを本当に理解しようとしており、非常にイライラしています. したがって、私が投稿しているコードを具体的に修正するのに役立つ人がいる場合は、本当に感謝しています。繰り返しますが、これは特定の CSS 手法で実現できることはわかっていますが、ここで何が間違っているのかを理解したいと思います。

適切に機能する正規表現が必要ですが、現在持っている正規表現は壊れています。

目標は

画像の通常の src は次のとおりです: Image.png

ホバー時に jQuery を使用すると、画像の src が動的に検索され、ImageName-Dn.png に置き換えられます。

ホバーオフすると、 ImageName.png に戻ります

私の現在の解決策：

ただし、何らかの理由で、ある時点で画像が設定されImageName-Dn.png、その後、台無しになり、設定されImageName-Dn-Dn.pngます。ヘルプはありますか？

私はこのサイトに不慣れで、助けが必要です!

ロールオーバーするとテーブルが表示され（完了しました）、独自の画像をタブに変更するボタンが必要ですが（そうします）、マウスがボタンまたはそのボタンを離れるまで、そのロールオーバータブの画像を保持しますそれぞれのテーブル（これが問題です）。

基本的に、画像を変更したり、テーブルを適切に展開したり非表示にしたりするのは非常に簡単ですが、ボタンやテーブルから離れたときにボタンを元の画像に戻すことはできません。

通常のロールオーバーのように動作させるコード行を取得しましたが、下のテーブルが同じオブジェクト内にネストされておらず、ロールオーバーしたままにしたいときに画像がロールバックされるため、これは役に立ちません。

ボタンとそのテーブルがネストされていないという事実は、子や祖先をトラバースできないため、事態を複雑にしていることは承知していますが、それを回避する方法があることを願っています。

以下は私のサンプル コードです。これは、私が働いている人がさまざまな部分の連続したアニメーションをたくさん欲しがっていたので、私がやろうとしていることにはかなり厄介です。

HTMLは次のとおりです。

そして、ここに私の JavaScript/jQuery があります:

構築しているサイトのJqueryで画像切り替え機能を使用しています。たくさんのプロジェクトがあるので、私はこれらの画像の多くを大幅に圧縮しています。ただし、それらの一部は.gifとして見栄えがよくなく、実際には.jpgを作成することだけが意味があります。

私の問題は、このコードが1つの画像を、名前は異なるがプレフィックスが類似している別の画像にのみスワップすることです。ファイルの名前だけを交換する方法はありますか？.gifまたは.jpgがある場合、名前を_staticから_rolloverに交換するだけなので、問題はありませんか？

これが私が使用しているコードです：

および画像スイッチのHTML

切り替える画像の名前は/img/mr_button_rollover.jpg

ありがとう！

そこで、プリロードの目的でイメージ スワップを実行する新しい方法を試すために、この小さなコードを書きましたが、少し問題が発生しています。

私の問題は、パディングとテキストを含む画像のコンテナーがあることですが、ロールオーバーのアクティブ化は、コンテナーではなく、誰かが画像をロールオーバーしたときにのみ発生します。私は少し間違っているに違いありません。誰かが私を助けてくれることを願っています。まだまだ勉強中！

html は次のとおりです。

ここにjqueryがあります：