Problem with pop-up layer written in pure CSS_html/css

I want to use a picture as a link. When the mouse moves over the picture, the corresponding layer will pop up under the picture. Similar to the Want Want customer service module on Taobao, when the mouse moves over the Want Want icon, the corresponding Want Want list will pop up below! Now I want to use CSS to write without JS code. I don’t know how to implement it. Is there any expert who knows about it and can give me some ideas? It’s best if they can give me an example! Thank you so much! Thanks!

Reply to the discussion (solution)

They are all written in js

I don’t know how to do it. It seems that it can be achieved using CSS hiding. Yes, but I don’t know how to operate it!

I don’t think it is possible with pure css. Anyway, I have never written it or seen it.

There is a pure CSS div pop-up menu in my resources for your reference.

I don’t know how to do it. It seems that it can be achieved using CSS hiding, but I don’t know how to do it!

You can use overflow:hidden and overflow:auto to switch between hiding and showing.

How to implement the code!

It can be implemented, but it will be too big. ,

You think the css is the css of the label, and each label has its own css. You can't control the style of the submenu with the css on the main menu, right? Right?

This can only be achieved through other methods. For example, the submenu is divided into two parts. The upper part covers the main menu and is transparent, and the lower part is the submenu function. At the beginning of debugging, the height of this layer is the same as the main menu. When the mouse moves above, the height of the layer is changed to the height of the main menu and submenu.
And your layer must be absolutely positioned, otherwise the submenu will be displayed and the content under the menu will be pushed downwards. This is ugly.

Just implement the code yourself.

Let’s use js to implement it. There is no need to complicate simple problems.

How is it possible to write it in css? ? ? I just wrote a jquery, take a look

</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>

Copy after login

 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;        	}

Copy after login

 </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>

Copy after login

I am a newbie too! It’s so complicated to write!

Thanks! Learn from each other!

How can it be written in css? ? ? I just wrote a jquery code, take a look
JScript code