2 つの Web ページの特殊効果についてのアイデアを教えてください_html/css_WEB-ITnose

この投稿は、2013-07-03 08:58:35 に jgongcheng によって最終編集されました

アイデアのみです。誠にありがとうございます:
1. 以下に示すように、マウスをナビゲーション上に置くと、ナビゲーションの下に三角形の記号が表示されます




2. Amazon ホームページのカテゴリーナビゲーション: 以下に示すように


マウスは任意のカテゴリに置かれます アップロードすると、以下に示すように、右側に追加のページがあります

ディスカッションに返信（解決策）

これら 2 つの効果 インターネット上にソースコードがたくさんあることは知っていますでもよく分からないのでアイデアを頂きたいです。詳しい方が良いです。よろしくお願いします。できますよ

.parent{position:relative;}.parent > .child{ display:none; position:absolute; left:0px; top:0px}.parent:hover > .child{ display:block;}

他は自分で試してみてください

この CSS のどの部分ですか?

フロントエンド技術とは主に html+div+css+js を指します
css はスタイルシート部分を指します

フロントエンド技術とは主に html+div+css+js を指します
css はスタイルシート部分を指します

これは三角形の CSS を作成するために使用されますか?

フロントエンド技術とは主に html+div+css+js を指します
css はスタイルシート部分を指します

これはその三角形を作成するために使用された CSS ですか？

この下三角は

を使用して実現できます。 CSS を使用して変換します

最初の効果は、2 つのスタイルを切り替えるだけです。一方の背景までマウスを移動し、もう一方の背景を変更するにはマウスを放します。 2 番目の効果は、表示切り替えの効果です。デフォルトでは、マウスを上に移動すると、対応する DIV が表示されます

1 つ目の効果は、マウスを 1 つの背景に切り替えるだけです。マウスを放したままにして、別の背景に変更します。 2 つ目は、表示切り替えの効果です。デフォルトでは、すべてが表示されません。マウスを上に移動して、対応する DIV を表示します。 1 つ目は、背景を変更することです。2 つ目は、位置を決定する方法です。マウスを上に移動した後の div の?

js で行うこともできますし、そのような画像を挿入することもできます

どちらのエフェクトも CSS 連携エフェクトです。一般的なアイデアは、マウス イベントに基づいて表示/非表示にすることです。