Problem with pop-up layer written in pure CSS_html/css_WEB-ITnose

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>

 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>

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


                 

The above is the HTML code. The div with the id of inner is the menu you want to define specifically. You can change it to something else. The key is to change the inner with CSS

first. The object is set to absolute positioning, out of the document flow, and the disable attribute is set to invisible

<div id="outer">    <a href="url"><img  src="/static/imghwm/default1.png"  data-src="url"  class="lazy"   / alt="Problem with pop-up layer written in pure CSS_html/css_WEB-ITnose" ></a>    <div id="inner">        <ul>            <li></li>            <li></li>            <li></li>        </ul>    </div></div>

Then the key point:


The above CSS code uses the pseudo class :hover externally For div elements, theoretically: hover can be used on any element.
If not, the following should work:

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

The above uses the adjacent sibling selector, which should work. 🎜> The above is all entered manually, there may be errors, but the idea should be fairly clear

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

I personally tested it, and the poster copied it to have a look. The effect is quite rough, but the essence. It’s obvious.

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

a:hover div{} can be achieved using CSS. . Set the image as the background image.

Let me show you a demo! Pure CSS display and hide

Just look at the source file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />	<meta name="author" content="" />    <style type="text/css">    *{        margin: 0;        padding: 0;        width: 100px;    }    #out{       border-style: solid;    }    #inner{        visibility: hidden;        position: absolute;    }    #out:hover #inner{        visibility: visible;        top: 20px;    }    </style>	<title>Untitled 1</title></head><body><div id="out">    <a href="http://www.hao13.com">hello!</a>    <div id="inner">        <ul>            <li>nihao1</li>            <li>nihao2</li>            <li>nihao3</li>                </ul>    </div></div></body></html>

Let me show you a demo! Pure CSS display and hide

You can get the effect you want by looking at the source code.

It’s a very good website.