純粋な CSS_html/css_WEB-ITnose で記述されたポップアップ レイヤーの問題

画像をリンクとして使用したいのですが、マウスを画像の上に移動すると、対応するレイヤーが画像の下に表示されます。淘宝網の旺旺顧客サービス モジュールと同様に、旺旺アイコンの上にマウスを移動すると、対応する旺旺リストが下にポップアップ表示されます。 JS コードを使用せずに CSS を使用したいのですが、その実装方法がわかりません。例を教えていただけると幸いです。ありがたい！ありがとう！

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

全てjsで書かれています

やり方が分かりません CSSで隠すことで実現できるようですが、分かりません。やり方を知ってください！

とにかく、純粋な CSS では不可能だと思います。書いたことも見たこともありません。

参考までに、私のリソースに純粋な css+div ポップアップ メニューがあります。

CSS の非表示で実現できるらしいのですが、やり方がわかりません。

overflow:hidden と overflow:auto を使用して、非表示と表示を切り替えることができます。

コードはどのように実装されますか?

実装は可能ですが、大きすぎます。 ,

CSS はラベルの CSS だと思っていて、各ラベルには独自の CSS があります。メインメニューの CSS ではサブメニューのスタイルを制御できませんよね。右？

これは他の方法でのみ実現できます。たとえば、サブメニューが 2 つの部分に分かれており、上部はメイン メニューを覆い、下部はサブメニュー機能です。このレイヤーのデバッグは、最初はメインメニューの高さは同じですが、マウスを上に移動するとレイヤーの高さがメインメニュー+サブメニューの高さに変更されます。
また、レイヤーは絶対位置に配置する必要があります。そうしないと、サブメニューが表示され、メニューの下のコンテンツが下に押し込まれます。これは醜いです。

自分でコードを実装するだけです。

js を使用して実装しましょう。単純な問題を複雑にする必要はありません。

CSSでどうやって書くことができますか？ ? ? jquery を書いたところです。見てください

</script>       <script type="text/javascript">         $(document).ready(function(){                        $(".flipa").click(function(){            $(".panela").slideToggle("slow");          });        });        $(document).ready(function(){                        $(".flipb").click(function(){            $(".panelb").slideToggle("slow");          });        });        $(document).ready(function(){                        $(".flipc").click(function(){            $(".panelc").slideToggle("slow");          });        });        $(document).ready(function(){                        $(".flipd").click(function(){            $(".paneld").slideToggle("slow");          });        });                </script>

 div.panela,.panelb,.panelc,.paneld,p.flipa,p.flipb,p.flipc,p.flipd        {            margin:0px;            padding:5px;            text-align:center;            background:#e5eecc;            border:solid 1px #c3c3c3;                    }        div.panela,.panelb,.panelc,.paneld        {        	width:220px;            height:120px;            display:none;        }        p.flipa,p.flipb,p.flipc,p.flipd        {        	 width:220px;        	 height:20px;        	}

 </div>     <p>请输入密码：</p>    <input type="password" id="pwd" /><p />    <div class="panela">    <p><a href="">百度一下</a></p>    <p><a href="">百度一下</a></p>    </div>            <p class="flipa" id="a">请点A</p>    <div class="panelb">    <p><a href="">百度一下</a></p>    <p><a href="">百度一下</a></p>    </div>     <p class="flipb" id="b">请点B</p>    <div class="panelc">    <p><a href="">百度一下</a></p>    <p><a href="">百度一下</a></p>    </div>     <p class="flipc" id="c">请点C</p>    <div class="paneld">    <p><a href="">百度一下</a></p>    <p><a href="">百度一下</a></p>    </div>     <p class="flipd" id="d">请点D</p>

私も初心者です!書くのはとても難しいです！

ありがとうございます！お互いから学び合いましょう！

CSSでどうやって書くことができますか？ ? ? jquery コードを書いたところです。見てください

$(".flipa ") ...

CSS を見たことがありますが、今は忘れてしまいました。 ...... 特別に定義されたメニューは他のものに置き換えることができます
重要なのは CSS です
まず、ドキュメント フローの外で内部オブジェクトを絶対配置に設定し、disable 属性を非表示に設定します

<div id="outer">    <a href="url"><img src="url" /></a>    <div id="inner">        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </div></div>

次にキーポイント:

#inner {    position:absolute;    visibility:hidden;}

上記の CSS コード 疑似クラス :hover は外部 div 要素で使用されます

そうでない場合は、次のように動作します:

#out:hover #inner{    visibility:visible;    top:10px;    left:10px;}

上記は次のとおりです。隣接する兄弟セレクター。上記はすべて手動で入力されているため、エラーがあるかもしれませんが、アイデアはかなり明確であるはずです。私はそれを個人的にテストし、その効果を確認するために投稿者がコピーしました。かなり大雑把ですが、本質は明白です

a:hover div. {}
このように書くことができます...

ソースコードを見てみましょう... を入手できます。


純粋な CSS のデモをお見せします
あなたの望む効果を得ることができます

とても良いウェブサイトです~