当前位置:Gxlcms > html代码 > 纯CSS写的弹出层问题_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:27人阅读

我想要用图片作为一个链接,当鼠标移到图片上的时候就在图片的下面弹出相应的层。类似于淘宝上旺旺客服模块,当鼠标移到旺旺图标上的时候,就弹出底下对应的旺旺列表!现在想要用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;        	}

 

请输入密码:

百度一下

百度一下

请点A

百度一下

百度一下

请点B

百度一下

百度一下

请点C

百度一下

百度一下

请点D

我也是新手啊! 写得复杂了!

谢谢了!相互学习!

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



以上是HTML代码,id为inner的div是你要具体定义的菜单,换成其他的也行。
关键是CSS
首先将inner对象设置为绝对定位,脱离文档流,并且设置disable属性为不可见

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

然后关键一点:
#out:hover #inner{    visibility:visible;    top:10px;    left:10px;}

以上CSS代码将伪类:hover用到了外部div元素上,理论上来说:hover可以用到任何元素上。
如果不行,下面这个应该可以:
a:hover+#inner{    visibility:visible;    top:10px;    left:10px;}

以上用的是相邻兄弟选择器,应该可以。
上面都是手工录入的,可能会有错误,但是思路应该还算清楚吧。

		    	Untitled 1
hello!
  • nihao1
  • nihao2
  • nihao3

本人亲测,楼主复制过去看一下,效果相当粗糙,但本质已经显而易见了。

a:hover div{}
用css是可以实现的。。。你这样写看看。。。把图片设置成div的背景图。。。

给你看个demo! 纯css的显示隐藏

源码就自己看源文件吧。。应该你想要的效果都能搞定!

给你看个demo! 纯css的显示隐藏

源码就自己看源文件吧。。应该你想要的效果都能搞定!
很好的一个网站~

人气教程排行