欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯CSS写的弹出层问题_html/css_WEB-ITnose

程序员文章站 2022-05-14 14:33:19
...
我想要用图片作为一个链接,当鼠标移到图片上的时候就在图片的下面弹出相应的层。类似于淘宝上旺旺客服模块,当鼠标移到旺旺图标上的时候,就弹出底下对应的旺旺列表!现在想要用CSS去写,不用JS代码,不知道怎么去实现,有那位知道的高手们给我一点思路,最好能给个例子把!感激不尽!谢谢!


回复讨论(解决方案)

都是js写的

不会把,好像可以用CSS的隐藏来实现的,但是我不知道具体怎么操作!

纯css我觉得不可能,反正我是没写过,也没见过。

我的资源里有纯css+div弹出菜单,可供你做参考。

不会把,好像可以用CSS的隐藏来实现的,但是我不知道具体怎么操作!

是可以这样,使用overflow:hidden和overflow:auto去切换隐藏和显示。

代码怎么实现的呢!

实现是可以实现,不过这样就搞大了。、

你想css是标签的css,各标签有各自的css,你不可能在主菜单上的css能够控制子菜单的样式吧?对不?

只有通过其它方式实现,比如子菜单分为两部份,上面部份覆盖主菜单且透明,下面一部份是子菜单功能。开始时这层的调试是主菜单高度一样,当鼠标移到上面时,改变层的高度为主菜单+子菜单的高度。
而且你这个层必须是绝对定位的,不然子菜单显示出来会把菜单下面的内容向下挤。这就很难看了。

代码就自己实现吧。

还是用js来实现吧,没有必要把简单的问题复杂化。

怎么可能用css写出来啊???刚写的一个jquery的,看下吧

       

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