2 u013179958 u013179958 于 2016.02.04 09:27 提问

这个下拉框是如何实现的?

图片说明

3个回答

showbo
showbo   Ds   Rxr 2016.02.04 10:28
已采纳
 <!doctype html>
<style>
    .trigger{position:relative;}
    .trigger .popup{position:absolute;left:0px;top:20px;background:#fff;border:solid 1px #000;display:none}
    .trigger:hover .popup{display:block}
</style>
<div class="trigger">
    <a href="#">鼠标移动到这里弹出层</a>
    <div class="popup">
        弹出层的内容<br /> 弹出层的内容<br /> 弹出层的内容
    </div>
</div>
showbo
showbo 回复据说名字太长不容易被发现: 其实就是使用了:hover伪类,默认popup隐藏,hover后设置popup display block显示出来,注意IE6-不支持非a对象:hover伪类,你要兼容ie6需要自己写js代码。:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。http://www.w3school.com.cn/cssref/pr_pseudo_hover.asp
接近 2 年之前 回复
u013179958
u013179958 大神 给解读下css的代码被 , 没太看懂啊
接近 2 年之前 回复
u013179958
u013179958 大神 个解读下css的代码被 , 没太看懂啊
接近 2 年之前 回复
qq_19558705
qq_19558705   Ds   Rxr 2016.02.04 09:37

如果想自己写:想完成下面div布局,隐藏。点击上面的bug后显示。当然也可以用bootstrap或者是select2

qq_19558705
qq_19558705 回复据说名字太长不容易被发现: 中间的编号(ctrl+g) 是为了快速找到拉下框内容么?如果是,select2就有这个功能。
接近 2 年之前 回复
qq_19558705
qq_19558705 回复据说名字太长不容易被发现: bootstrap有个下拉菜单:http://www.runoob.com/bootstrap/bootstrap-dropdowns.html
接近 2 年之前 回复
u013179958
u013179958 如果用BootStrap如何实现?
接近 2 年之前 回复
rui888
rui888   Ds   Rxr 2016.02.04 09:44

div+css 模拟出来的弹出框

u013179958
u013179958 有Demo吗
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!