問題タブ [rollovers]

こんにちは - ロールオーバー リンクが機能しない理由がわかりません。z-index と div が非表示になっていることが関係しているのではないかと思います。

パンくずリストの例:

最後の2つは何らかの理由で機能します。ここからページを見て、ソースを表示できます。

http://cpkdesign.com/uiaustin

みんな、ありがとう。

私はJavaScriptにかなり慣れていないのでmouseover、リンクすると、ページの右側の画像が変更され、次に変更されるようにしようとしていますmouseout.

ここに私のJavaScriptがあります:

そして私のHTML：

私は通常 CSS でこれにアプローチしますが、別の要素のプロパティを変更しているため、CSS を機能させるのに問題がありました。どんな助けでも大歓迎です！

ここで、テキストから画像へのロールオーバーを作成する良い方法を見つけていじりました：http://jsfiddle.net/pkZAW/12/

ただし、ここのサムネイル画像にあるように、トランジションのインとアウトをフェードする必要があります: http://lydiafraserward.co.uk/index.php?page=producing

いろいろ調べた結果、このトランジションをスクリプトに追加できませんでした:-? .. 何か案は..？

jQuery タスクに問題があります。リンクをロールオーバーするときに「«」記号を表示しようとしています。問題は、一度に「ロールオーバー」できるリンクは 1 つだけですが、「«」がすべてのリンクに表示されることです。

コードは次のとおりです。

したがって、私が理解しているように、「.list td」内の「a」要素をロールオーバーした後、私のクラス「.laquo」が表示されるはずです。これはうまく機能しています。しかし、一度に 1 つの 'a' だけをターゲットにするように jQuery に指示するにはどうすればよいでしょうか?

同様の質問から解決策を試しました：

しかし、それは機能していません-「«」はまったく表示されません。私は何を間違っていますか？

HTML で編集:

ご覧のとおり、「.laquo」は「a」の子ではありません。じゃあどうやって選ぶの？

ああ、私はそれを手に入れました:D. 「a」を削除する必要があったので、「td」から選択しています。

みんな助けてくれてありがとう！

リンクを含む画像で問題が発生しました。Webサイトのヘッダーとして機能する固定位置PNGがあります。この画像は私のホームページにリンクしています。その下をスクロールすると、画像全体を表示するためにクリックする一連のサムネイルが表示されます。サムネイルがヘッダーPNGの後ろにくるように下にスクロールすると、ホームページのリンクをクリックできなくなります。代わりに、後ろのサムネイルのリンクをクリックします。

サムネイルのロールオーバー機能と関係があるように感じます。ヘッダーPNGが半透明になるため、理想的ではありません。これが私のコーディングです（最初からコーディングを試みたのでお詫びします）：

CSS：

私が間違っていることについて何か考えはありますか？

WordPress でレスポンシブ サイトを構築しており、3 つのホットスポットを含むインタラクティブなダイアグラムを作成する必要があります。三角形の角にある 3 つのアイコンはそれぞれ別のホットスポットになります...

青色をロールオーバーすると、青色の矢印とテキストが表示され、三角形の他の部分が部分的に隠されます -ここに見られるように. 同様に、緑をロールオーバーすると、緑の矢印とテキストが表示されます。そして最後に、ピンクをロールオーバーすると、ピンクの矢印とテキストが表示されます。

これまで CSS スプライトを試したことはありませんが、古い JavaScript の onMouseOut / onMouseOver メソッドよりも優れていることは理解しています。このインタラクティブな図を作成する最善の方法を教えてください。私はコーディングがあまり得意ではありません。どんな援助でも大歓迎です。

ありがとう！

私はこのフィドルのフォークに取り組んできました- すべての小道具は元の作者に送られます。

ImageMapster と連携して、イメージ マップにカーソルを合わせると html リスト アイテムが強調表示され、逆に、リスト アイテムにカーソルを合わせると適切な画像マップが強調表示されるように設計されています。ご想像のとおり、適切な場所にクラスを追加および削除することで機能します。

メニュー項目のアンカーとそのリスト項目ラッパーの両方に独自のクラスを多数追加する Drupal 7 でそのコード (およびそのバリエーション) を使用しようとしています。その余分なマークアップが上記のスクリプトで問題を引き起こしているため、頭を悩ませています。

たくさんの試行錯誤を経て (私は JS があまり得意ではありません!)、特に Drupal が「menu-depth-1」のクラスを li に追加すると、スクリプトが失われ、エラーがスローされることに気付きました。 (Chrome から):

上記のスクリプトのこのフォークで、追加したのは Drupal が追加するマークアップだけです。

http://jsfiddle.net/PUncle/Tr4hE/32/

元のスクリプトを次のように変更します。

に：

私が理解している限り、スクリプトはハイフン付きのセレクターを探しており、目的の「menu-item-a」に到達する前に「menu-depth-1」に遭遇すると失敗します。

特にスクリプトのこの部分に問題があると思いますが、何を試しても修正方法がわかりません。

私がする必要があるのは、スクリプトを「強化」して、特定のセレクターを非常に明確にターゲットにし、他のものを無視することです。

私は Drupals の過剰なメニュー マークアップをクリーンアップする道をたどり始めましたが、「鈍い」コードへの道を切り開くことは、そのコードを鋭くして他に影響を及ぼさないようにすることほど効果的ではないと判断しました!

任意のポインタをいただければ幸いです。

また、リンクを作成する方法についてのヒントを提供してください. 少し正しい方向を指す必要があります。

ありがとう